11
This commit is contained in:
parent
be945964a2
commit
8be15e8022
92
README.md
92
README.md
|
|
@ -1,92 +0,0 @@
|
|||
# YML-teacher-uniapp
|
||||
|
||||
|
||||
|
||||
## Getting started
|
||||
|
||||
To make it easy for you to get started with GitLab, here's a list of recommended next steps.
|
||||
|
||||
Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
|
||||
|
||||
## Add your files
|
||||
|
||||
- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
|
||||
- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
|
||||
|
||||
```
|
||||
cd existing_repo
|
||||
git remote add origin http://101.43.163.13:8099/taoxu/yml-teacher-uniapp.git
|
||||
git branch -M main
|
||||
git push -uf origin main
|
||||
```
|
||||
|
||||
## Integrate with your tools
|
||||
|
||||
- [ ] [Set up project integrations](http://101.43.163.13:8099/taoxu/yml-teacher-uniapp/-/settings/integrations)
|
||||
|
||||
## Collaborate with your team
|
||||
|
||||
- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
|
||||
- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
|
||||
- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
|
||||
- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
|
||||
- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
|
||||
|
||||
## Test and Deploy
|
||||
|
||||
Use the built-in continuous integration in GitLab.
|
||||
|
||||
- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
|
||||
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
|
||||
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
|
||||
- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
|
||||
- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
|
||||
|
||||
***
|
||||
|
||||
# Editing this README
|
||||
|
||||
When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
|
||||
|
||||
## Suggestions for a good README
|
||||
Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
|
||||
|
||||
## Name
|
||||
Choose a self-explaining name for your project.
|
||||
|
||||
## Description
|
||||
Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
|
||||
|
||||
## Badges
|
||||
On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
|
||||
|
||||
## Visuals
|
||||
Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
|
||||
|
||||
## Installation
|
||||
Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
|
||||
|
||||
## Usage
|
||||
Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
|
||||
|
||||
## Support
|
||||
Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
|
||||
|
||||
## Roadmap
|
||||
If you have ideas for releases in the future, it is a good idea to list them in the README.
|
||||
|
||||
## Contributing
|
||||
State if you are open to contributions and what your requirements are for accepting them.
|
||||
|
||||
For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
|
||||
|
||||
You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
|
||||
|
||||
## Authors and acknowledgment
|
||||
Show your appreciation to those who have contributed to the project.
|
||||
|
||||
## License
|
||||
For open source projects, say how it is licensed.
|
||||
|
||||
## Project status
|
||||
If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
|
||||
|
|
@ -15,7 +15,7 @@ const install = (Vue, vm) => {
|
|||
// 设置为json，返回后会对数据进行一次JSON.parse()
|
||||
dataType: 'json',
|
||||
showLoading: true, // 是否显示请求中的loading
|
||||
loadingText: '雅思备考...', // 请求loading中的文字提示
|
||||
loadingText: '...', // 请求loading中的文字提示
|
||||
loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
|
||||
originalData: false, // 是否在拦截器中返回服务端的原始数据
|
||||
loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
|
||||
|
|
|
|||
|
|
@ -1,54 +1,60 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="u-page">
|
||||
<!-- 所有内容的容器 -->
|
||||
</view>
|
||||
<view class="cont">
|
||||
|
||||
<!-- <view class="u-page">
|
||||
|
||||
</view> -->
|
||||
<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
|
||||
<u-tabbar v-model="current" :list="list" icon-size='40rpx' active-color='#3996fd' inactive-color="#c8c7cb"></u-tabbar>
|
||||
<!-- <u-tabbar v-model="current" :list="list" icon-size='40rpx' active-color='#3996fd' inactive-color="#c8c7cb"></u-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
indexs: [Number, String], //题目id
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
iconPath: require('@/static/tabbar/home.png'),
|
||||
selectedIconPath:require('@/static/tabbar/home-active.png'),
|
||||
text: '首页',
|
||||
customIcon: true,
|
||||
pagePath:'/pages/index/index2'
|
||||
},
|
||||
{
|
||||
iconPath: require('@/static/tabbar/tiku.png'),
|
||||
selectedIconPath:require('@/static/tabbar/tiku-act.png'),
|
||||
text: '班级',
|
||||
customIcon: true,
|
||||
pagePath:'/pages/home/home'
|
||||
}
|
||||
,{
|
||||
iconPath: require('@/static/tabbar/my.png'),
|
||||
selectedIconPath:require('@/static/tabbar/my-active.png'),
|
||||
text: '我的',
|
||||
customIcon: true,
|
||||
pagePath:'/pages/user/usertwo'
|
||||
},
|
||||
],
|
||||
current: 0
|
||||
return {
|
||||
currentTabbarIndex: 0,
|
||||
|
||||
// 自定义底栏对应页面的加载情况
|
||||
tabberPageLoadFlag: [],
|
||||
ispop: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.currentTabbarIndex = this.indexs
|
||||
// const index = Number(this.indexs || 0)
|
||||
// // 根据底部tabbar菜单列表设置对应页面的加载情况
|
||||
// for (let i = 0; i < 5; i++) {
|
||||
// this.tabberPageLoadFlag.push(i === index)
|
||||
// }
|
||||
// this.changeTabbar(index)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/.u-tabbar__content__item__button{
|
||||
/deep/.u-tabbar__content__item__button {
|
||||
top: 20rpx !important;
|
||||
}
|
||||
|
||||
/deep/.u-tabbar {
|
||||
.u-tabbar__content__item:nth-child(2) {
|
||||
.u-tabbar__content__item__button {
|
||||
width: 32rpx !important;
|
||||
}
|
||||
}
|
||||
.u-tabbar__content__item:nth-child(2) {
|
||||
.u-tabbar__content__item__button {
|
||||
width: 32rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cont {
|
||||
position: fixed;
|
||||
left: 60rpx;
|
||||
bottom: 78rpx;
|
||||
width: 632rpx;
|
||||
height: 128rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
</style>
|
||||
2
echarts-for-weixin-master/.gitignore
vendored
2
echarts-for-weixin-master/.gitignore
vendored
|
|
@ -1,2 +0,0 @@
|
|||
project.private.config.json
|
||||
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
## 提问前应该做的事
|
||||
|
||||
请确保提问前做了以下事，将完成的项目的 `[]` 改为 `[x]`：
|
||||
|
||||
- [] 我已通读过 [README](https://github.com/ecomfe/echarts-for-weixin/blob/master/README.md)
|
||||
- [] 我已阅读过 [FAQ](https://github.com/ecomfe/echarts-for-weixin/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Afaq+)
|
||||
|
||||
## 需提供的信息
|
||||
|
||||
将符合项的 `[]` 改为 `[x]`，并补充需要的信息：
|
||||
|
||||
### 简单描述问题：
|
||||
？？？
|
||||
|
||||
### 预期效果：
|
||||
？？？
|
||||
（如有需要请提供预期的图）
|
||||
|
||||
### 实际效果：
|
||||
？？？
|
||||
（如有需要请提供截图）
|
||||
|
||||
### 复现环境：
|
||||
- [] 在微信开发工具中存在该问题
|
||||
- [] 在真机上存在该问题
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
BSD 3-Clause License
|
||||
|
||||
Copyright (c) 2020, Baidu Inc.
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
* Neither the name of the copyright holder nor the names of its
|
||||
contributors may be used to endorse or promote products derived from
|
||||
this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
||||
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
||||
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
||||
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
||||
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
||||
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
||||
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
# 在微信小程序中使用 Apache ECharts
|
||||
|
||||
本项目是 [Apache ECharts](https://github.com/apache/echarts) 的微信小程序版本，以及使用的示例。
|
||||
|
||||
开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。
|
||||
|
||||
## 体验示例小程序
|
||||
|
||||
在微信中扫描下面的二维码即可体验 ECharts Demo：
|
||||
|
||||
|
||||
|
||||
## 下载
|
||||
|
||||
为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
|
||||
|
||||
首先，下载本项目。
|
||||
|
||||
其中，`ec-canvas` 是我们提供的组件，其他文件是如何使用该组件的示例。
|
||||
|
||||
`ec-canvas` 目录下有一个 `echarts.js`，默认我们会在每次 `echarts-for-weixin` 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载[最新发布版](https://github.com/apache/echarts/releases)，或者从[官网自定义构建](https://echarts.apache.org/zh/builder.html)以减小文件大小。
|
||||
|
||||
## 引入组件
|
||||
|
||||
微信小程序的项目创建可以参见[微信公众平台官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/)。
|
||||
|
||||
在创建项目之后，可以将下载的 [ecomfe/echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 `ec-canvas` 目录到新建的项目下，然后做相应的调整。
|
||||
|
||||
如果采用完全替换的方式，需要将 `project.config.json` 中的 `appid` 替换成在公众平台申请的项目 id。`pages` 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 `app.json` 中删除对应页面。
|
||||
|
||||
如果仅拷贝 `ec-canvas` 目录，则可以参考 `pages/bar` 目录下的几个文件的写法。下面，我们具体地说明。
|
||||
|
||||
|
||||
## 创建图表
|
||||
|
||||
首先，在 `pages/bar` 目录下新建以下几个文件：`index.js`、 `index.json`、 `index.wxml`、 `index.wxss`。并且在 `app.json` 的 `pages` 中增加 `'pages/bar/index'`。
|
||||
|
||||
`index.json` 配置如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这一配置的作用是，允许我们在 `pages/bar/index.wxml` 中使用 `<ec-canvas>` 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。
|
||||
|
||||
`index.wxml` 中，我们创建了一个 `<ec-canvas>` 组件，内容如下：
|
||||
|
||||
```xml
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
```
|
||||
|
||||
> 注意此处的 `.container`，新建小程序项目后，其中 `app.wxss` 中默认自动生成的此 class 与本 demo 中的可能不一致，导致图表不能正常显示，只显示空白。请注意参考 `app.wxss` 修改样式，保证图表的初始化的时候是有宽度和高度的。
|
||||
|
||||
其中 `ec` 是一个我们在 `index.js` 中定义的对象，它使得图表能够在页面加载后被初始化并设置。`index.js` 的结构如下：
|
||||
|
||||
```js
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // 像素比
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
...
|
||||
};
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
这对于所有 ECharts 图表都是通用的，用户只需要修改上面 `option` 的内容，即可改变图表。`option` 的使用方法参见 [ECharts 配置项文档](https://echarts.apache.org/zh/option.html)。对于不熟悉 ECharts 的用户，可以参见 [快速上手 ECharts](https://echarts.apache.org/handbook/zh/get-started/) 教程。
|
||||
|
||||
完整的例子请参见 [ecomfe/echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目。
|
||||
|
||||
## FAQ
|
||||
### 如何获取图表实例？
|
||||
|
||||
`echarts.init` 返回的即为图表实例，可以参考 [pages/bar/index.js](/blob/master/pages/bar/index.js) 的写法。
|
||||
|
||||
### 如何延迟加载图表？
|
||||
|
||||
参见 `pages/lazyLoad` 的例子，可以在获取数据后再初始化数据。
|
||||
|
||||
### 如何在一个页面中加载多个图表？
|
||||
|
||||
参见 `pages/multiCharts` 的例子。
|
||||
|
||||
### 如何使用 Tooltip？
|
||||
|
||||
目前，本项目已支持 ECharts Tooltip，但是由于 ECharts 相关功能尚未发版，因此需要使用当前本项目中 `ec-canvas/echarts.js`，这个文件包含了可以在微信中使用 Tooltip 的相关代码。目前在 ECharts 官网下载的 `echarts.js` 还不能直接替换使用，等 ECharts 正式发版后即可。
|
||||
|
||||
具体使用方法和 ECharts 相同，例子参见 `pages/line/index.js`。
|
||||
|
||||
目前一个已知的 bug 是，有些图表的 tooltip 会显示 `<br/>` 而非换行符。这一问题将在之后修复，暂时碰到这一问题时，开发者可以通过在 formatter 中使用 `\n` 作为换行。
|
||||
|
||||
### 如何保存为图片？
|
||||
|
||||
参见 `pages/saveCanvas` 的例子。
|
||||
|
||||
### 文件太大怎么办？
|
||||
|
||||
本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件。可以下载不同版本的 [ECharts](https://github.com/apache/echarts/blob/master/dist/) 进行替换。建议调试时使用未压缩版本，发布时使用压缩版本，否则文件会太大无法发布。
|
||||
|
||||
发布时，如果对文件大小要求更高，可以在 [ECharts 在线定制](https://echarts.apache.org/zh/builder.html)网页下载仅包含必要组件的包，并且选择压缩。
|
||||
|
||||
下载的文件放在 `ec-canvas/echarts.js`，**注意一定需要重命名为 `echarts.js`**。
|
||||
|
||||
此外，还可考虑使用微信小程序的[分包策略](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html)
|
||||
|
||||
## 微信版本要求
|
||||
|
||||
### Canvas 2d 版本要求
|
||||
|
||||
最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 `force-use-old-canvas="true"` 的情况下，使用新的 Canvas 2d（默认）。
|
||||
|
||||
使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启
|
||||
|
||||
如果仍需使用旧版 Canvas，使用方法如下：
|
||||
|
||||
```html
|
||||
<ec-canvas id="xxx" canvas-id="xxx" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
|
||||
```
|
||||
|
||||
### 最低版本要求
|
||||
|
||||
支持微信版本 >= 6.6.3，对应基础库版本 >= 1.9.91。尽可能使用更高版本的基础库版本。
|
||||
|
||||
调试的时候，需要在微信开发者工具中，将“详情”下的“调试基础库”设为 1.9.91 及以上版本。
|
||||
|
||||
发布前，需要在 [https://mp.weixin.qq.com](https://mp.weixin.qq.com) 的“设置”页面，将“基础库最低版本设置”设为 1.9.91。当用户微信版本过低的时候，会提示用户更新。
|
||||
|
||||
|
||||
## 暂不支持的功能
|
||||
|
||||
ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。
|
||||
|
||||
以下功能尚不支持，如果有相关需求请在 [issue](https://github.com/ecomfe/echarts-for-weixin/issues) 中向我们反馈，对于反馈人数多的需求将优先支持：
|
||||
|
||||
- 多个 zlevel 分层
|
||||
|
||||
此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：
|
||||
|
||||
- 安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）
|
||||
- iOS 平台：半透明略有变深的问题
|
||||
- iOS 平台：渐变色出现在定义区域之外的地方
|
||||
|
||||
如有其它问题，也欢迎在 [issue](https://github.com/ecomfe/echarts-for-weixin/issues) 中向我们反馈，谢谢！
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
//app.js
|
||||
App({
|
||||
onLaunch: function () {
|
||||
// 展示本地存储能力
|
||||
var logs = wx.getStorageSync('logs') || []
|
||||
logs.unshift(Date.now())
|
||||
wx.setStorageSync('logs', logs)
|
||||
|
||||
// 登录
|
||||
wx.login({
|
||||
success: res => {
|
||||
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||
}
|
||||
})
|
||||
// 获取用户信息
|
||||
wx.getSetting({
|
||||
success: res => {
|
||||
if (res.authSetting['scope.userInfo']) {
|
||||
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
|
||||
wx.getUserInfo({
|
||||
success: res => {
|
||||
// 可以将 res 发送给后台解码出 unionId
|
||||
this.globalData.userInfo = res.userInfo
|
||||
|
||||
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
|
||||
// 所以此处加入 callback 以防止这种情况
|
||||
if (this.userInfoReadyCallback) {
|
||||
this.userInfoReadyCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
globalData: {
|
||||
userInfo: null
|
||||
}
|
||||
})
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
{
|
||||
"pages": [
|
||||
"pages/index/index",
|
||||
"pages/bar/index",
|
||||
"pages/measureText/index",
|
||||
"pages/line/index",
|
||||
"pages/scatter/index",
|
||||
"pages/sunburst/index",
|
||||
"pages/funnel/index",
|
||||
"pages/radar/index",
|
||||
"pages/gauge/index",
|
||||
"pages/pie/index",
|
||||
"pages/k/index",
|
||||
"pages/heatmap/index",
|
||||
"pages/tree/index",
|
||||
"pages/treemap/index",
|
||||
"pages/map/index",
|
||||
"pages/graph/index",
|
||||
"pages/boxplot/index",
|
||||
"pages/parallel/index",
|
||||
"pages/sankey/index",
|
||||
"pages/themeRiver/index",
|
||||
"pages/lazyLoad/index",
|
||||
"pages/multiCharts/index",
|
||||
"pages/move/index",
|
||||
"pages/saveCanvas/index",
|
||||
"pages/loadImage/index"
|
||||
],
|
||||
"window": {
|
||||
"backgroundTextStyle": "light",
|
||||
"backgroundColor": "#eee",
|
||||
"navigationBarBackgroundColor": "#eee",
|
||||
"navigationBarTitleText": "ECharts 图表示例",
|
||||
"navigationBarTextStyle": "black"
|
||||
},
|
||||
"sitemapLocation": "sitemap.json"
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
/**app.wxss**/
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
import WxCanvas from './wx-canvas';
|
||||
import * as echarts from './echarts';
|
||||
|
||||
let ctx;
|
||||
|
||||
function compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i])
|
||||
const num2 = parseInt(v2[i])
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
value: 'ec-canvas'
|
||||
},
|
||||
|
||||
ec: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
forceUseOldCanvas: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
isUseNewCanvas: false
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
// Disable prograssive because drawImage doesn't support DOM as parameter
|
||||
// See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
|
||||
echarts.registerPreprocessor(option => {
|
||||
if (option && option.series) {
|
||||
if (option.series.length > 0) {
|
||||
option.series.forEach(series => {
|
||||
series.progressive = 0;
|
||||
});
|
||||
}
|
||||
else if (typeof option.series === 'object') {
|
||||
option.series.progressive = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.data.ec) {
|
||||
console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
|
||||
+ 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.data.ec.lazyLoad) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
init: function (callback) {
|
||||
const version = wx.getSystemInfoSync().SDKVersion
|
||||
|
||||
const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
|
||||
const forceUseOldCanvas = this.data.forceUseOldCanvas;
|
||||
const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
|
||||
this.setData({ isUseNewCanvas });
|
||||
|
||||
if (forceUseOldCanvas && canUseNewCanvas) {
|
||||
console.warn('开发者强制使用旧canvas,建议关闭');
|
||||
}
|
||||
|
||||
if (isUseNewCanvas) {
|
||||
// console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
|
||||
// 2.9.0 可以使用 <canvas type="2d"></canvas>
|
||||
this.initByNewWay(callback);
|
||||
} else {
|
||||
const isValid = compareVersion(version, '1.9.91') >= 0
|
||||
if (!isValid) {
|
||||
console.error('微信基础库版本过低，需大于等于 1.9.91。'
|
||||
+ '参见：https://github.com/ecomfe/echarts-for-weixin'
|
||||
+ '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
|
||||
return;
|
||||
} else {
|
||||
console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
|
||||
this.initByOldWay(callback);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initByOldWay(callback) {
|
||||
// 1.9.91 <= version < 2.9.0：原来的方式初始化
|
||||
ctx = wx.createCanvasContext(this.data.canvasId, this);
|
||||
const canvas = new WxCanvas(ctx, this.data.canvasId, false);
|
||||
|
||||
if (echarts.setPlatformAPI) {
|
||||
echarts.setPlatformAPI({
|
||||
createCanvas: () => canvas,
|
||||
});
|
||||
} else {
|
||||
echarts.setCanvasCreator(() => canvas);
|
||||
};
|
||||
// const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
|
||||
const canvasDpr = 1
|
||||
var query = wx.createSelectorQuery().in(this);
|
||||
query.select('.ec-canvas').boundingClientRect(res => {
|
||||
if (typeof callback === 'function') {
|
||||
this.chart = callback(canvas, res.width, res.height, canvasDpr);
|
||||
}
|
||||
else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
|
||||
this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
|
||||
}
|
||||
else {
|
||||
this.triggerEvent('init', {
|
||||
canvas: canvas,
|
||||
width: res.width,
|
||||
height: res.height,
|
||||
canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
|
||||
});
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
|
||||
initByNewWay(callback) {
|
||||
// version >= 2.9.0：使用新的方式初始化
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query
|
||||
.select('.ec-canvas')
|
||||
.fields({ node: true, size: true })
|
||||
.exec(res => {
|
||||
const canvasNode = res[0].node
|
||||
this.canvasNode = canvasNode
|
||||
|
||||
const canvasDpr = wx.getSystemInfoSync().pixelRatio
|
||||
const canvasWidth = res[0].width
|
||||
const canvasHeight = res[0].height
|
||||
|
||||
const ctx = canvasNode.getContext('2d')
|
||||
|
||||
const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
|
||||
if (echarts.setPlatformAPI) {
|
||||
echarts.setPlatformAPI({
|
||||
createCanvas: () => canvas,
|
||||
loadImage: (src, onload, onerror) => {
|
||||
if (canvasNode.createImage) {
|
||||
const image = canvasNode.createImage();
|
||||
image.onload = onload;
|
||||
image.onerror = onerror;
|
||||
image.src = src;
|
||||
return image;
|
||||
}
|
||||
console.error('加载图片依赖 `Canvas.createImage()` API，要求小程序基础库版本在 2.7.0 及以上。');
|
||||
// PENDING fallback?
|
||||
}
|
||||
})
|
||||
} else {
|
||||
echarts.setCanvasCreator(() => canvas)
|
||||
}
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
|
||||
} else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
|
||||
this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr)
|
||||
} else {
|
||||
this.triggerEvent('init', {
|
||||
canvas: canvas,
|
||||
width: canvasWidth,
|
||||
height: canvasHeight,
|
||||
dpr: canvasDpr
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
canvasToTempFilePath(opt) {
|
||||
if (this.data.isUseNewCanvas) {
|
||||
// 新版
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query
|
||||
.select('.ec-canvas')
|
||||
.fields({ node: true, size: true })
|
||||
.exec(res => {
|
||||
const canvasNode = res[0].node
|
||||
opt.canvas = canvasNode
|
||||
wx.canvasToTempFilePath(opt)
|
||||
})
|
||||
} else {
|
||||
// 旧的
|
||||
if (!opt.canvasId) {
|
||||
opt.canvasId = this.data.canvasId;
|
||||
}
|
||||
ctx.draw(true, () => {
|
||||
wx.canvasToTempFilePath(opt, this);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
touchStart(e) {
|
||||
if (this.chart && e.touches.length > 0) {
|
||||
var touch = e.touches[0];
|
||||
var handler = this.chart.getZr().handler;
|
||||
handler.dispatch('mousedown', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y,
|
||||
preventDefault: () => {},
|
||||
stopImmediatePropagation: () => {},
|
||||
stopPropagation: () => {}
|
||||
});
|
||||
handler.dispatch('mousemove', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y,
|
||||
preventDefault: () => {},
|
||||
stopImmediatePropagation: () => {},
|
||||
stopPropagation: () => {}
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), 'start');
|
||||
}
|
||||
},
|
||||
|
||||
touchMove(e) {
|
||||
if (this.chart && e.touches.length > 0) {
|
||||
var touch = e.touches[0];
|
||||
var handler = this.chart.getZr().handler;
|
||||
handler.dispatch('mousemove', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y,
|
||||
preventDefault: () => {},
|
||||
stopImmediatePropagation: () => {},
|
||||
stopPropagation: () => {}
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), 'change');
|
||||
}
|
||||
},
|
||||
|
||||
touchEnd(e) {
|
||||
if (this.chart) {
|
||||
const touch = e.changedTouches ? e.changedTouches[0] : {};
|
||||
var handler = this.chart.getZr().handler;
|
||||
handler.dispatch('mouseup', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y,
|
||||
preventDefault: () => {},
|
||||
stopImmediatePropagation: () => {},
|
||||
stopPropagation: () => {}
|
||||
});
|
||||
handler.dispatch('click', {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y,
|
||||
preventDefault: () => {},
|
||||
stopImmediatePropagation: () => {},
|
||||
stopPropagation: () => {}
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), 'end');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function wrapTouch(event) {
|
||||
for (let i = 0; i < event.touches.length; ++i) {
|
||||
const touch = event.touches[i];
|
||||
touch.offsetX = touch.x;
|
||||
touch.offsetY = touch.y;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!-- 新的：接口对其了H5 -->
|
||||
<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
|
||||
<!-- 旧的 -->
|
||||
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,111 +0,0 @@
|
|||
export default class WxCanvas {
|
||||
constructor(ctx, canvasId, isNew, canvasNode) {
|
||||
this.ctx = ctx;
|
||||
this.canvasId = canvasId;
|
||||
this.chart = null;
|
||||
this.isNew = isNew
|
||||
if (isNew) {
|
||||
this.canvasNode = canvasNode;
|
||||
}
|
||||
else {
|
||||
this._initStyle(ctx);
|
||||
}
|
||||
|
||||
// this._initCanvas(zrender, ctx);
|
||||
|
||||
this._initEvent();
|
||||
}
|
||||
|
||||
getContext(contextType) {
|
||||
if (contextType === '2d') {
|
||||
return this.ctx;
|
||||
}
|
||||
}
|
||||
|
||||
// canvasToTempFilePath(opt) {
|
||||
// if (!opt.canvasId) {
|
||||
// opt.canvasId = this.canvasId;
|
||||
// }
|
||||
// return wx.canvasToTempFilePath(opt, this);
|
||||
// }
|
||||
|
||||
setChart(chart) {
|
||||
this.chart = chart;
|
||||
}
|
||||
|
||||
addEventListener() {
|
||||
// noop
|
||||
}
|
||||
|
||||
attachEvent() {
|
||||
// noop
|
||||
}
|
||||
|
||||
detachEvent() {
|
||||
// noop
|
||||
}
|
||||
|
||||
_initCanvas(zrender, ctx) {
|
||||
zrender.util.getContext = function () {
|
||||
return ctx;
|
||||
};
|
||||
|
||||
zrender.util.$override('measureText', function (text, font) {
|
||||
ctx.font = font || '12px sans-serif';
|
||||
return ctx.measureText(text);
|
||||
});
|
||||
}
|
||||
|
||||
_initStyle(ctx) {
|
||||
ctx.createRadialGradient = () => {
|
||||
return ctx.createCircularGradient(arguments);
|
||||
};
|
||||
}
|
||||
|
||||
_initEvent() {
|
||||
this.event = {};
|
||||
const eventNames = [{
|
||||
wxName: 'touchStart',
|
||||
ecName: 'mousedown'
|
||||
}, {
|
||||
wxName: 'touchMove',
|
||||
ecName: 'mousemove'
|
||||
}, {
|
||||
wxName: 'touchEnd',
|
||||
ecName: 'mouseup'
|
||||
}, {
|
||||
wxName: 'touchEnd',
|
||||
ecName: 'click'
|
||||
}];
|
||||
eventNames.forEach(name => {
|
||||
this.event[name.wxName] = e => {
|
||||
const touch = e.touches[0];
|
||||
this.chart.getZr().handler.dispatch(name.ecName, {
|
||||
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
|
||||
zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
|
||||
preventDefault: () => {},
|
||||
stopImmediatePropagation: () => {},
|
||||
stopPropagation: () => {}
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
set width(w) {
|
||||
if (this.canvasNode) this.canvasNode.width = w
|
||||
}
|
||||
set height(h) {
|
||||
if (this.canvasNode) this.canvasNode.height = h
|
||||
}
|
||||
|
||||
get width() {
|
||||
if (this.canvasNode)
|
||||
return this.canvasNode.width
|
||||
return 0
|
||||
}
|
||||
get height() {
|
||||
if (this.canvasNode)
|
||||
return this.canvasNode.height
|
||||
return 0
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 617 B |
Binary file not shown.
|
Before Width: | Height: | Size: 644 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 898 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 651 B |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
|
|
@ -1,137 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
let chart = null;
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
confine: true
|
||||
},
|
||||
legend: {
|
||||
data: ['热度', '正面', '负面']
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '热度',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data: [300, 270, 340, 344, 300, 320, 310],
|
||||
itemStyle: {
|
||||
// emphasis: {
|
||||
// color: '#37a2da'
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '正面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: [120, 102, 141, 174, 190, 250, 220],
|
||||
itemStyle: {
|
||||
// emphasis: {
|
||||
// color: '#32c5e9'
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '负面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
data: [-20, -32, -21, -34, -90, -130, -110],
|
||||
itemStyle: {
|
||||
// emphasis: {
|
||||
// color: '#67e0e3'
|
||||
// }
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
setTimeout(function () {
|
||||
// 获取 chart 实例的方式
|
||||
// console.log(chart)
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,191 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
import echarts from 'echarts';
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: 'Dispersion of house price\naccording to the number of bedrooms',
|
||||
x: 'center',
|
||||
y: 10,
|
||||
textStyle: {
|
||||
color: '#3259B8',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '15%',
|
||||
right: '10%',
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1 bedroom', '2 bedrooms', '3 bedrooms', '4 bedrooms', '5 bedrooms', '6 bedrooms'],
|
||||
|
||||
nameTextStyle: {
|
||||
color: '#3259B8',
|
||||
fontSize: 14,
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#3259B8',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: '#3259B8',
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}\nCNY/㎡',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#3259B8',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#A7BAFA',
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: 'boxplot',
|
||||
type: 'boxplot',
|
||||
data: [
|
||||
[30645,
|
||||
53490,
|
||||
66640.5,
|
||||
89123,
|
||||
159949,
|
||||
],
|
||||
[19464,
|
||||
46454,
|
||||
59139,
|
||||
83479,
|
||||
179440,
|
||||
],
|
||||
[16704,
|
||||
46041,
|
||||
60155,
|
||||
86818,
|
||||
159980,
|
||||
],
|
||||
[21543,
|
||||
41619.75,
|
||||
58819.5,
|
||||
87540,
|
||||
159978,
|
||||
],
|
||||
[15202,
|
||||
35757,
|
||||
44721,
|
||||
59916.5,
|
||||
159825,
|
||||
],
|
||||
[22158,
|
||||
34754.5,
|
||||
49718,
|
||||
71637,
|
||||
139972,
|
||||
],
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#F02FC2' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#3EACE5' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderWidth: 2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(240,47,194,0.7)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(62,172,299,0.7)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
return [
|
||||
'Upper: ' + param.data[5] + ' CNY/㎡',
|
||||
'Q3: ' + param.data[4] + ' CNY/㎡',
|
||||
'Median: ' + param.data[3] + ' CNY/㎡',
|
||||
'Q1: ' + param.data[2] + ' CNY/㎡',
|
||||
'Lower: ' + param.data[1] + ' CNY/㎡'
|
||||
].join('<br/>')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
backgroundColor: "#ffffff",
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a}\n{b} : {c}%"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
data: ['展现', '点击', '访问', '咨询', '订单']
|
||||
},
|
||||
calculable: true,
|
||||
series: [
|
||||
{
|
||||
name: '漏斗图',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '5%',
|
||||
top: '50%',
|
||||
data: [{ value: 100, name: '展现' },
|
||||
{ value: 80, name: '点击' },
|
||||
{ value: 60, name: '访问' },
|
||||
{ value: 30, name: '咨询' },
|
||||
{ value: 10, name: '订单' },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '金字塔',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '5%',
|
||||
top: '5%',
|
||||
sort: 'ascending',
|
||||
data: [
|
||||
{ value: 60, name: '访问' },
|
||||
{ value: 30, name: '咨询' },
|
||||
{ value: 10, name: '订单' },
|
||||
{ value: 80, name: '点击' },
|
||||
{ value: 100, name: '展现' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '漏斗图',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '55%',
|
||||
top: '5%',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '访问' },
|
||||
{ value: 30, name: '咨询' },
|
||||
{ value: 10, name: '订单' },
|
||||
{ value: 80, name: '点击' },
|
||||
{ value: 100, name: '展现' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '金字塔',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '55%',
|
||||
top: '50%',
|
||||
sort: 'ascending',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '访问' },
|
||||
{ value: 30, name: '咨询' },
|
||||
{ value: 10, name: '订单' },
|
||||
{ value: 80, name: '点击' },
|
||||
{ value: 100, name: '展现' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-funnel" canvas-id="mychart-funnel" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
backgroundColor: "#ffffff",
|
||||
series: [{
|
||||
name: '业务指标',
|
||||
type: 'gauge',
|
||||
detail: {
|
||||
formatter: '{value}%'
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
data: [{
|
||||
value: 40,
|
||||
name: '完成率',
|
||||
}]
|
||||
|
||||
}]
|
||||
};
|
||||
|
||||
chart.setOption(option, true);
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-gauge" canvas-id="mychart-gauge" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: 'Graph 简单示例'
|
||||
},
|
||||
tooltip: {},
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
symbolSize: 50,
|
||||
roam: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
// edgeSymbol: ['circle', 'arrow'],
|
||||
// edgeSymbolSize: [4, 10],
|
||||
edgeLabel: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
name: '节点1',
|
||||
x: 300,
|
||||
y: 300,
|
||||
itemStyle: {
|
||||
color: '#37A2DA'
|
||||
}
|
||||
}, {
|
||||
name: '节点2',
|
||||
x: 800,
|
||||
y: 300,
|
||||
itemStyle: {
|
||||
color: '#32C5E9'
|
||||
}
|
||||
}, {
|
||||
name: '节点3',
|
||||
x: 550,
|
||||
y: 100,
|
||||
itemStyle: {
|
||||
color: '#9FE6B8'
|
||||
}
|
||||
}, {
|
||||
name: '节点4',
|
||||
x: 550,
|
||||
y: 500,
|
||||
itemStyle: {
|
||||
color: '#FF9F7F'
|
||||
}
|
||||
}],
|
||||
// links: [],
|
||||
links: [{
|
||||
source: 0,
|
||||
target: 1,
|
||||
symbolSize: [5, 20],
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 4,
|
||||
curveness: 0.2
|
||||
}
|
||||
}
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点1',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: { curveness: 0.2 }
|
||||
}
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点3'
|
||||
}, {
|
||||
source: '节点2',
|
||||
target: '节点4'
|
||||
}, {
|
||||
source: '节点1',
|
||||
target: '节点4'
|
||||
}],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.9,
|
||||
width: 2,
|
||||
curveness: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
const model = {
|
||||
yCates: ['Saturday', 'Friday', 'Thursday',
|
||||
'Wednesday', 'Tuesday', 'Monday',
|
||||
'Sunday'],
|
||||
xCates: ['1', '2', '3', '4', '5'],
|
||||
data: [
|
||||
// [yCateIndex, xCateIndex, value]
|
||||
[0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2],
|
||||
[1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2],
|
||||
[2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7],
|
||||
[3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6],
|
||||
[4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9],
|
||||
[5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 7],
|
||||
[6, 0, 6], [6, 1, 5], [6, 2, 3], [6, 3, 1], [6, 4, 2]
|
||||
]
|
||||
};
|
||||
|
||||
const data = model.data.map(function (item) {
|
||||
return [item[1], item[0], item[2] || '-'];
|
||||
});
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
bottom: 60,
|
||||
top: 10,
|
||||
left: 80
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: model.xCates
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: model.yCates
|
||||
},
|
||||
visualMap: {
|
||||
min: 1,
|
||||
max: 10,
|
||||
show: false,
|
||||
calculable: true,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
bottom: 10,
|
||||
inRange: {
|
||||
color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Punch Card',
|
||||
type: 'heatmap',
|
||||
data: data,
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
const app = getApp();
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () {},
|
||||
fail: function () {}
|
||||
}
|
||||
},
|
||||
data: {
|
||||
charts: [{
|
||||
id: 'bar',
|
||||
name: '柱状图'
|
||||
}, {
|
||||
id: 'scatter',
|
||||
name: '散点图'
|
||||
}, {
|
||||
id: 'pie',
|
||||
name: '饼图'
|
||||
}, {
|
||||
id: 'line',
|
||||
name: '折线图'
|
||||
}, {
|
||||
id: 'funnel',
|
||||
name: '漏斗图'
|
||||
}, {
|
||||
id: 'gauge',
|
||||
name: '仪表盘'
|
||||
}, {
|
||||
id: 'k',
|
||||
name: 'K 线图'
|
||||
}, {
|
||||
id: 'radar',
|
||||
name: '雷达图'
|
||||
}, {
|
||||
id: 'heatmap',
|
||||
name: '热力图'
|
||||
}, {
|
||||
id: 'tree',
|
||||
name: '树图'
|
||||
}, {
|
||||
id: 'treemap',
|
||||
name: '矩形树图'
|
||||
}, {
|
||||
id: 'sunburst',
|
||||
name: '旭日图'
|
||||
}, {
|
||||
id: 'map',
|
||||
name: '地图'
|
||||
}, {
|
||||
id: 'graph',
|
||||
name: '关系图'
|
||||
}, {
|
||||
id: 'boxplot',
|
||||
name: '箱型图'
|
||||
}, {
|
||||
id: 'parallel',
|
||||
name: '平行坐标图'
|
||||
}, {
|
||||
id: 'sankey',
|
||||
name: '桑基图'
|
||||
}, {
|
||||
id: 'themeRiver',
|
||||
name: '主题河流图'
|
||||
}],
|
||||
chartsWithoutImg: [{
|
||||
id: 'lazyLoad',
|
||||
name: '延迟加载图表'
|
||||
}, {
|
||||
id: 'multiCharts',
|
||||
name: '一个页面中多个图表'
|
||||
}, {
|
||||
id: 'move',
|
||||
name: '页面不阻塞滚动'
|
||||
}, {
|
||||
id: 'saveCanvas',
|
||||
name: '保存 Canvas 到本地文件'
|
||||
}, {
|
||||
id: 'loadImage',
|
||||
name: '加载图片'
|
||||
}]
|
||||
},
|
||||
|
||||
onReady() {
|
||||
},
|
||||
|
||||
open: function (e) {
|
||||
wx.navigateTo({
|
||||
url: '../' + e.target.dataset.chart.id + '/index'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
{
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<!-- index.wxml -->
|
||||
<view class="panel">
|
||||
<view class="chart-with-img" wx:for="{{charts}}" wx:for-item="chart" wx:key="id">
|
||||
<image src="../../img/icons/{{chart.id}}.png" mode="aspectFit" bindtap="open" data-chart="{{chart}}"></image>
|
||||
{{chart.name}}
|
||||
</view>
|
||||
<view class="chart-without-img" wx:for="{{chartsWithoutImg}}" wx:for-item="chart" wx:key="id">
|
||||
<button bindtap="open" data-chart="{{chart}}">{{chart.name}}</button>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
.panel {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.panel .chart-with-img {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin: 10px 4%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chart-with-img image {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #eee;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.chart-without-img {
|
||||
display: block;
|
||||
width: 92%;
|
||||
margin: 10px 4%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.chart-without-img button {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: 'K 线图'
|
||||
},
|
||||
xAxis: {
|
||||
data: ['10:00', '10:30', '11:00', '11:30', '13:00', '13:30', '14:00']
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
type: 'k',
|
||||
data: [
|
||||
[100, 200, 40, 250],
|
||||
[80, 90, 66, 100],
|
||||
[90, 40, 33, 110],
|
||||
[50, 60, 40, 80],
|
||||
[200, 180, 160, 200],
|
||||
[100, 200, 40, 250],
|
||||
[80, 90, 66, 100]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#ff0000',
|
||||
color0: '#00ff00',
|
||||
borderWidth: 1,
|
||||
opacity: 1,
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function setOption(chart) {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['热度', '正面', '负面']
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '热度',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data: [300, 270, 340, 344, 300, 320, 310],
|
||||
itemStyle: {
|
||||
// emphasis: {
|
||||
// color: '#37a2da'
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '正面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: [120, 102, 141, 174, 190, 250, 220],
|
||||
itemStyle: {
|
||||
// emphasis: {
|
||||
// color: '#32c5e9'
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '负面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
data: [-20, -32, -21, -34, -90, -130, -110],
|
||||
itemStyle: {
|
||||
// emphasis: {
|
||||
// color: '#67e0e3'
|
||||
// }
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: res => {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
|
||||
onReady: function () {
|
||||
// 获取组件
|
||||
this.ecComponent = this.selectComponent('#mychart-dom-bar');
|
||||
},
|
||||
|
||||
data: {
|
||||
ec: {
|
||||
// 将 lazyLoad 设为 true 后，需要手动初始化图表
|
||||
lazyLoad: true
|
||||
},
|
||||
isLoaded: false,
|
||||
isDisposed: false
|
||||
},
|
||||
|
||||
// 点击按钮后初始化图表
|
||||
init: function () {
|
||||
this.ecComponent.init((canvas, width, height, dpr) => {
|
||||
// 获取组件的 canvas、width、height 后的回调函数
|
||||
// 在这里初始化图表
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
setOption(chart);
|
||||
|
||||
// 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
|
||||
this.chart = chart;
|
||||
|
||||
this.setData({
|
||||
isLoaded: true,
|
||||
isDisposed: false
|
||||
});
|
||||
|
||||
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
||||
return chart;
|
||||
});
|
||||
},
|
||||
|
||||
dispose: function () {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
|
||||
this.setData({
|
||||
isDisposed: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<button bindtap="init" wx:if="{{!isLoaded}}">加载图表</button>
|
||||
<button bindtap="dispose" wx:if="{{isLoaded && !isDisposed}}">释放图表</button>
|
||||
<ec-canvas wx:if="{{!isDisposed}}" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: '测试下面legend的红色区域不应被裁剪',
|
||||
left: 'center'
|
||||
},
|
||||
legend: {
|
||||
data: ['A', 'B', 'C'],
|
||||
top: 50,
|
||||
left: 'center',
|
||||
backgroundColor: 'red',
|
||||
z: 100
|
||||
},
|
||||
grid: {
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
// show: false
|
||||
},
|
||||
yAxis: {
|
||||
x: 'center',
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
// show: false
|
||||
},
|
||||
series: [{
|
||||
name: 'A',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [18, 36, 65, 30, 78, 40, 33]
|
||||
}, {
|
||||
name: 'B',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [12, 50, 51, 35, 70, 30, 20]
|
||||
}, {
|
||||
name: 'C',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [10, 30, 31, 50, 40, 20, 10]
|
||||
}]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
const piePatternSrc = '/img/pie-pattern.jpg';
|
||||
const bgPatternSrc = '/img/pie-bg.png';
|
||||
|
||||
var option = {
|
||||
backgroundColor: {
|
||||
image: bgPatternSrc,
|
||||
repeat: 'repeat'
|
||||
},
|
||||
title: {
|
||||
text: '加载图片',
|
||||
textStyle: {
|
||||
color: '#235894'
|
||||
}
|
||||
},
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
name: 'pie',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 30,
|
||||
clockwise: true,
|
||||
label: {
|
||||
fontSize: 18,
|
||||
color: '#235894'
|
||||
},
|
||||
labelLine: {
|
||||
lineStyle: {
|
||||
color: '#235894'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
],
|
||||
itemStyle: {
|
||||
opacity: 0.7,
|
||||
color: {
|
||||
image: piePatternSrc,
|
||||
repeat: 'repeat'
|
||||
},
|
||||
borderWidth: 3,
|
||||
borderColor: '#235894'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-load-image" canvas-id="mychart-load-image" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
import geoJson from './mapData.js';
|
||||
|
||||
const app = getApp();
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
echarts.registerMap('henan', geoJson);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text: ['高', '低'], // 文本，默认为数值文本
|
||||
calculable: true
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'map',
|
||||
mapType: 'henan',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
normal: {
|
||||
borderColor: '#389BB7',
|
||||
areaColor: '#fff',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#389BB7',
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
animation: false,
|
||||
|
||||
data: [
|
||||
{ name: '郑州市', value: 100 },
|
||||
{ name: '洛阳市', value: 10 },
|
||||
{ name: '开封市', value: 20 },
|
||||
{ name: '信阳市', value: 30 },
|
||||
{ name: '驻马店市', value: 40 },
|
||||
{ name: '南阳市', value: 41 },
|
||||
{ name: '周口市', value: 15 },
|
||||
{ name: '许昌市', value: 25 },
|
||||
{ name: '平顶山市', value: 35 },
|
||||
{ name: '新乡市', value: 35 },
|
||||
{ name: '漯河市', value: 35 },
|
||||
{ name: '商丘市', value: 35 },
|
||||
{ name: '三门峡市', value: 35 },
|
||||
{ name: '济源市', value: 35 },
|
||||
{ name: '焦作市', value: 35 },
|
||||
{ name: '安阳市', value: 35 },
|
||||
{ name: '鹤壁市', value: 35 },
|
||||
{ name: '濮阳市', value: 35 },
|
||||
{ name: '开封市', value: 45 }
|
||||
]
|
||||
|
||||
}],
|
||||
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ec: {
|
||||
onInit: initChart
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,15 +0,0 @@
|
|||
const app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
value: null
|
||||
},
|
||||
|
||||
onReady() {
|
||||
var ctx = wx.createCanvasContext('measure');
|
||||
var value = ctx.measureText('国国国国', '12px san-serif');
|
||||
this.setData({
|
||||
value: value.width
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
{
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
measureText: {{ value }}
|
||||
<canvas canvas-id="measure" id="measure"></canvas>
|
||||
</view>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/**index.wxss**/
|
||||
#measure {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ecBar: {
|
||||
// 如果想要禁止触屏事件，以保证在图表区域内触摸移动仍能滚动页面，
|
||||
// 就将 disableTouch 设为 true
|
||||
// disableTouch: true,
|
||||
|
||||
onInit: function (canvas, width, height, dpr) {
|
||||
const barChart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(barChart);
|
||||
barChart.setOption(getBarOption());
|
||||
|
||||
return barChart;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
||||
function getBarOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['热度', '正面', '负面']
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '热度',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data: [300, 270, 340, 344, 300, 320, 310]
|
||||
},
|
||||
{
|
||||
name: '正面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: [120, 102, 141, 174, 190, 250, 220]
|
||||
},
|
||||
{
|
||||
name: '负面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
data: [-20, -32, -21, -34, -90, -130, -110]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="move-container">
|
||||
<ec-canvas id="mychart-dom-move-bar" canvas-id="mychart-move-bar" ec="{{ ecBar }}"></ec-canvas>
|
||||
<view class="text">
|
||||
<text>这是一个展示页面不被图表阻塞的例子</text>
|
||||
<text>在图表区域（红色边框）之外可以滚动</text>
|
||||
</view>
|
||||
<view class="text">
|
||||
<text>这是一个展示页面不被图表阻塞的例子</text>
|
||||
<text>在图表区域（红色边框）之外可以滚动</text>
|
||||
</view>
|
||||
<view class="text">
|
||||
<text>这是一个展示页面不被图表阻塞的例子</text>
|
||||
<text>在图表区域（红色边框）之外可以滚动</text>
|
||||
</view>
|
||||
<view class="text">
|
||||
<text>这是一个展示页面不被图表阻塞的例子</text>
|
||||
<text>在图表区域（红色边框）之外可以滚动</text>
|
||||
</view>
|
||||
<view class="text">
|
||||
<text>这是一个展示页面不被图表阻塞的例子</text>
|
||||
<text>在图表区域（红色边框）之外可以滚动</text>
|
||||
</view>
|
||||
<view class="text">
|
||||
<text>这是一个展示页面不被图表阻塞的例子</text>
|
||||
<text>在图表区域（红色边框）之外可以滚动</text>
|
||||
</view>
|
||||
<view class="text">
|
||||
<text>这是一个展示页面不被图表阻塞的例子</text>
|
||||
<text>在图表区域（红色边框）之外可以滚动</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.move-container {
|
||||
width: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
#mychart-dom-move-bar {
|
||||
width: 70%;
|
||||
height: 300px;
|
||||
margin: 20px 15%;
|
||||
border: 1px solid red;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.move-container .text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.move-container text {
|
||||
margin: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
Page({
|
||||
onShareAppMessage: function (res) {
|
||||
return {
|
||||
title: 'ECharts 可以在微信小程序中使用啦！',
|
||||
path: '/pages/index/index',
|
||||
success: function () { },
|
||||
fail: function () { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
ecBar: {
|
||||
onInit: function (canvas, width, height, dpr) {
|
||||
const barChart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(barChart);
|
||||
barChart.setOption(getBarOption());
|
||||
|
||||
return barChart;
|
||||
}
|
||||
},
|
||||
|
||||
ecScatter: {
|
||||
onInit: function (canvas, width, height, dpr) {
|
||||
const scatterChart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // new
|
||||
});
|
||||
canvas.setChart(scatterChart);
|
||||
scatterChart.setOption(getScatterOption());
|
||||
|
||||
return scatterChart;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function getBarOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['热度', '正面', '负面']
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '热度',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data: [300, 270, 340, 344, 300, 320, 310]
|
||||
},
|
||||
{
|
||||
name: '正面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: [120, 102, 141, 174, 190, 250, 220]
|
||||
},
|
||||
{
|
||||
name: '负面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
data: [-20, -32, -21, -34, -90, -130, -110]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function getScatterOption() {
|
||||
|
||||
var data = [];
|
||||
var data2 = [];
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
data.push(
|
||||
[
|
||||
Math.round(Math.random() * 100),
|
||||
Math.round(Math.random() * 100),
|
||||
Math.round(Math.random() * 40)
|
||||
]
|
||||
);
|
||||
data2.push(
|
||||
[
|
||||
Math.round(Math.random() * 100),
|
||||
Math.round(Math.random() * 100),
|
||||
Math.round(Math.random() * 100)
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
var axisCommon = {
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#C8C8C8'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#C8C8C8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#C8C8C8',
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
backgroundColor: '#eee',
|
||||
xAxis: axisCommon,
|
||||
yAxis: axisCommon,
|
||||
legend: {
|
||||
data: ['aaaa', 'bbbb']
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
max: 100,
|
||||
inRange: {
|
||||
symbolSize: [20, 70]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'scatter',
|
||||
name: 'aaaa',
|
||||
data: data
|
||||
},
|
||||
{
|
||||
name: 'bbbb',
|
||||
type: 'scatter',
|
||||
data: data2
|
||||
}
|
||||
],
|
||||
animationDelay: function (idx) {
|
||||
return idx * 50;
|
||||
},
|
||||
animationEasing: 'elasticOut'
|
||||
};
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas>
|
||||
<ec-canvas id="mychart-dom-multi-scatter" canvas-id="mychart-multi-scatter" ec="{{ ecScatter }}"></ec-canvas>
|
||||
</view>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
#mychart-dom-multi-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#mychart-dom-multi-scatter {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user