├── .gitignore
├── docs
    ├── pie-clicked.jpeg
    ├── pie-not-click.jpeg
    └── pie-center-filled.jpeg
├── examples
    ├── formatter
    │   └── formatter.vue
    ├── lazy-load
    │   └── lazy-load.vue
    └── multi-charts
    │   └── multi-charts.vue
├── uni-ec-canvas
    ├── wx-canvas.js
    └── uni-ec-canvas.vue
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/docs/pie-clicked.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Zhuyi731/echarts-for-wx-uniapp/HEAD/docs/pie-clicked.jpeg


--------------------------------------------------------------------------------
/docs/pie-not-click.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Zhuyi731/echarts-for-wx-uniapp/HEAD/docs/pie-not-click.jpeg


--------------------------------------------------------------------------------
/docs/pie-center-filled.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Zhuyi731/echarts-for-wx-uniapp/HEAD/docs/pie-center-filled.jpeg


--------------------------------------------------------------------------------
/examples/formatter/formatter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view>
 3 |     <uni-ec-canvas
 4 |       class="uni-ec-canvas"
 5 |       id="line-chart"
 6 |       ref="canvas"
 7 |       canvas-id="lazy-load-chart"
 8 |       :ec="ec"
 9 |       @inited="inited"
10 |     >
11 |     </uni-ec-canvas>
12 |   </view>
13 | </template>
14 | 
15 | <script>
16 | import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
17 | export default {
18 |   data() {
19 |     return {
20 |       ec: {
21 |         lazyLoad: true,
22 |         option: {},
23 |       },
24 |     }
25 |   },
26 |   methods: {
27 |     inited(ins) {
28 |       const option = {
29 |         xAxis: {
30 |           type: 'time',
31 |           axisLabel: {
32 |             formatter: function (value, index) {
33 |               // 格式化成月/日，只在第一个刻度显示年份
34 |               var date = new Date(value)
35 |               var texts = [date.getMonth() + 1, date.getDate()]
36 |               if (index === 0) {
37 |                 texts.unshift(date.getYear())
38 |               }
39 |               return texts.join('/')
40 |             },
41 |             // formatter: {
42 |             // 	year: '{yearStyle|{yyyy}}\n{monthStyle|{MMM}}',
43 |             // 	month: '{monthStyle|{MMM}}'
44 |             // }
45 |             // formatter: {
46 |             // 	month: '{MMMM}', // 一月、二月、……
47 |             // 	day: '{d}日' // 1日、2日、……
48 |             // }
49 |           },
50 |         },
51 |         yAxis: {
52 |           type: 'value',
53 |         },
54 |         series: [
55 |           {
56 |             data: [
57 |               ['2021-11-01 08:00:00', 20],
58 |               ['2021-11-01 12:00:00', 30],
59 |               ['2021-11-01 15:00:00', 30],
60 |               ['2021-11-02 08:00:00', 40],
61 |               ['2021-11-03 08:00:00', 30],
62 |               ['2021-11-04 08:00:00', 10],
63 |             ],
64 |             type: 'line',
65 |           },
66 |           {
67 |             data: [
68 |               ['2021-11-01 00:00:00', 0],
69 |               ['2021-11-05 00:00:00', 0],
70 |             ],
71 |             type: 'line',
72 |           },
73 |         ],
74 |       }
75 | 
76 |       ins.setOption(option)
77 |     },
78 |   },
79 |   onReady() {
80 |     this.$refs['canvas'].init()
81 |   },
82 |   components: {
83 |     uniEcCanvas,
84 |   },
85 | }
86 | </script>
87 | <style scoped>
88 | .uni-ec-canvas {
89 |   width: 750upx;
90 |   height: 750upx;
91 |   display: block;
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/examples/lazy-load/lazy-load.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view>
  3 |         <uni-ec-canvas
  4 |           class="uni-ec-canvas"
  5 |           id="line-chart"
  6 |           ref="canvas"
  7 |           canvas-id="lazy-load-chart"
  8 |           :ec="ec"
  9 |         ></uni-ec-canvas>
 10 |     </view>
 11 | </template>
 12 | 
 13 | <script>
 14 | import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
 15 | export default {
 16 |   data () {
 17 |     return {
 18 |       ec: {
 19 |         lazyLoad:true,
 20 |         option: {
 21 |           title: {
 22 |             text: ''
 23 |           },
 24 |           tooltip: {
 25 |             trigger: 'axis',
 26 |             formatter: '{b}\r\n{c0}人',
 27 |             axisPointer: {
 28 |               type: 'line',
 29 |               axis: 'x',
 30 |               label: {
 31 |                 backgroundColor: '#000000'
 32 |               }
 33 |             }
 34 |           },
 35 |           grid: {
 36 |             left: '6%',
 37 |             right: '6%',
 38 |             top: '6%',
 39 |             bottom: '6%',
 40 |             containLabel: true
 41 |           },
 42 |           xAxis: {
 43 |             type: 'category',
 44 |             boundaryGap: false,
 45 |             data: ['2-12', '2-14', '2-16', '2-18', '2-20', '2-22', '2-24'],
 46 |             axisLine: {
 47 |               // y轴
 48 |               show: false
 49 |             },
 50 |             axisTick: {
 51 |               // y轴刻度线
 52 |               show: false
 53 |             },
 54 |             splitLine: {
 55 |               // 网格线
 56 |               show: false
 57 |             }
 58 |           },
 59 |           yAxis: {
 60 |             type: 'value',
 61 |             axisLine: {
 62 |               // y轴
 63 |               show: false
 64 |             },
 65 |             axisTick: {
 66 |               // y轴刻度线
 67 |               show: false
 68 |             },
 69 |             splitLine: {
 70 |               // 网格线
 71 |               show: false
 72 |             }
 73 |           },
 74 |           series: [
 75 |             {
 76 |               name: '浏览量',
 77 |               type: 'line',
 78 |               smooth: true,
 79 |               lineStyle: {
 80 |                 color: '#EF5959'
 81 |               },
 82 |               data: [120, 132, 101, 134, 90, 230, 210]
 83 |             }
 84 |           ]
 85 |         }
 86 |       }
 87 |     }
 88 |   },
 89 |   onReady () {
 90 |     setTimeout(()=>{
 91 |       console.log(this)
 92 |       console.log(this.$refs)
 93 |         this.$refs['canvas'].init()
 94 |         console.log('延迟加载了')
 95 |     },1000) // 两秒之后延迟加载
 96 | 
 97 |     setTimeout(()=>{
 98 |       this.ec.option.series[0].data = [1, 2, 3, 4, 5, 6, 7]
 99 |       // 如果是data数组内的数据 记得用$set
100 |       console.log('数据更改了')
101 |     },2000)
102 |   },
103 |   components: {
104 |     uniEcCanvas
105 |   }
106 | }
107 | </script>
108 | <style scoped>
109 | .uni-ec-canvas{
110 |     width: 750upx;
111 |     height: 750upx;
112 |     display:block;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/uni-ec-canvas/wx-canvas.js:
--------------------------------------------------------------------------------
  1 | export default class WxCanvas {
  2 |   constructor(ctx, canvasId, isNew, canvasNode) {
  3 |     this.ctx = ctx;
  4 |     this.canvasId = canvasId;
  5 |     this.chart = null;
  6 |     this.isNew = isNew
  7 |     if (isNew) {
  8 |       this.canvasNode = canvasNode;
  9 |     } else {
 10 |       this._initStyle(ctx);
 11 |     }
 12 | 
 13 |     // this._initCanvas(zrender, ctx);
 14 | 
 15 |     this._initEvent();
 16 |   }
 17 | 
 18 |   getContext(contextType) {
 19 |     if (contextType === '2d') {
 20 |       return this.ctx;
 21 |     }
 22 |   }
 23 | 
 24 |   // canvasToTempFilePath(opt) {
 25 |   //   if (!opt.canvasId) {
 26 |   //     opt.canvasId = this.canvasId;
 27 |   //   }
 28 |   //   return wx.canvasToTempFilePath(opt, this);
 29 |   // }
 30 | 
 31 |   setChart(chart) {
 32 |     this.chart = chart;
 33 |   }
 34 | 
 35 |   attachEvent() {
 36 |     // noop
 37 |   }
 38 | 
 39 |   detachEvent() {
 40 |     // noop
 41 |   }
 42 | 
 43 |   _initCanvas(zrender, ctx) {
 44 |     zrender.util.getContext = function () {
 45 |       return ctx;
 46 |     };
 47 | 
 48 |     zrender.util.$override('measureText', function (text, font) {
 49 |       ctx.font = font || '12px sans-serif';
 50 |       return ctx.measureText(text);
 51 |     });
 52 |   }
 53 | 
 54 |   _initStyle(ctx) {
 55 |     var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
 56 |       'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
 57 |       'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
 58 |     ];
 59 | 
 60 |     styles.forEach(style => {
 61 |       Object.defineProperty(ctx, style, {
 62 |         set: value => {
 63 |           if (style !== 'fillStyle' && style !== 'strokeStyle' ||
 64 |             value !== 'none' && value !== null
 65 |           ) {
 66 |             ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
 67 |           }
 68 |         }
 69 |       });
 70 |     });
 71 | 
 72 |     ctx.createRadialGradient = () => {
 73 |       return ctx.createCircularGradient(arguments);
 74 |     };
 75 |   }
 76 | 
 77 |   _initEvent() {
 78 |     this.event = {};
 79 |     const eventNames = [{
 80 |       wxName: 'touchStart',
 81 |       ecName: 'mousedown'
 82 |     }, {
 83 |       wxName: 'touchMove',
 84 |       ecName: 'mousemove'
 85 |     }, {
 86 |       wxName: 'touchEnd',
 87 |       ecName: 'mouseup'
 88 |     }, {
 89 |       wxName: 'touchEnd',
 90 |       ecName: 'click'
 91 |     }];
 92 | 
 93 |     eventNames.forEach(name => {
 94 |       this.event[name.wxName] = e => {
 95 |         const touch = e.touches[0];
 96 |         this.chart.getZr().handler.dispatch(name.ecName, {
 97 |           zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
 98 |           zrY: name.wxName === 'tap' ? touch.clientY : touch.y
 99 |         });
100 |       };
101 |     });
102 |   }
103 | 
104 |   set width(w) {
105 |     if (this.canvasNode) this.canvasNode.width = w
106 |   }
107 |   set height(h) {
108 |     if (this.canvasNode) this.canvasNode.height = h
109 |   }
110 | 
111 |   get width() {
112 |     if (this.canvasNode)
113 |       return this.canvasNode.width
114 |     return 0
115 |   }
116 |   get height() {
117 |     if (this.canvasNode)
118 |       return this.canvasNode.height
119 |     return 0
120 |   }
121 | }
122 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## deprecated  
  2 | 本项目仅支持vue2且已经停止维护， 建议使用其他echart插件进行开发
  3 | 
  4 | [uniapp echart插件](https://ext.dcloud.net.cn/plugin?id=4899)
  5 | 
  6 | ## 简介  
  7 | 本项目是 ECharts 的微信小程序版本，以及使用的示例。  
  8 |   
  9 | 该项目对[ecomfe/echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin)做了少量改动来兼容uni-app     
 10 |   
 11 | 需要通过uni-app编译后使用     
 12 |   
 13 | 如果你需要使用原生小程序开发方式，请移步[ecomfe/echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin)    
 14 |   
 15 | 开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。    
 16 | 
 17 | ## 文件目录结构  
 18 | 
 19 | 为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
 20 | 
 21 | 其中，`uni-ec-canvas` 是我们提供的组件，其他文件是如何使用该组件的示例。  
 22 | 
 23 | lazy-load为懒加载示例    
 24 | 
 25 | multi-charts为一个页面中多个表格的示例    
 26 | 
 27 | 其余示例请移步[官方示例](https://www.echartsjs.com/examples/zh/index.html)   
 28 | 
 29 | 然后将option替换即可  
 30 | 
 31 | `uni-ec-canvas` 目录下有一个 `echarts.js`，默认是包含所有功能的echarts。如有可以，建议从[官网自定义构建](http://echarts.baidu.com/builder.html)来替换这个文件以减小文件大小。  
 32 | 
 33 | ## 使用  
 34 | 复制uni-ec-canvas至你公用的组件文件夹   
 35 | 在页面中引入  
 36 | 
 37 | ```html 
 38 | <template>
 39 |     <view>
 40 |        <uni-ec-canvas 
 41 |           class="uni-ec-canvas"
 42 |           id="uni-ec-canvas"
 43 |           ref="uni-ec-canvas"
 44 |           canvas-id="uni-ec-canvas"
 45 |           :ec="ec"
 46 |           @inited="inited"
 47 |        ></uni-ec-canvas>
 48 |     </view>
 49 | </template>
 50 | ```
 51 | ```js 
 52 | <script>
 53 | // 此处将路径替换为你放置该组件的路径  
 54 | import uniEcCanvas from './uni-ec-canvas/ec-canvas.vue'  
 55 | 
 56 | export default{
 57 |     data(){
 58 |         return {
 59 |             ec:{
 60 |                 option:{} //echart 配置项
 61 |             }
 62 |         }
 63 |     },
 64 |     components:{
 65 |         uniEcCanvas
 66 |     },
 67 |     methods:{
 68 |         inited(chart){
 69 |            console.log('图表初始化完毕')
 70 |            console.log('chart实例', chart)
 71 |         }
 72 |     }
 73 | }
 74 | </script>
 75 | ```
 76 | ```css
 77 | // 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
 78 | <style>
 79 | .uni-ec-canvas{
 80 |     width:100%;
 81 |     height:100%;
 82 |     display:block;
 83 | }
 84 | </style>
 85 | ```
 86 | 
 87 | ## FAQ
 88 | ### uni-app 编译卡死  
 89 | 如果你配置了eslint检查，请屏蔽对echart.js的检查，否则会卡死
 90 | 
 91 | ### 如何改变数据  
 92 | 改变ec.option中的值图表即可动态变化  注意新增属性请使用$set
 93 | 
 94 | ### 如何获取图表实例？
 95 | 
 96 | 在页面中使用 this.$refs['uni-ec-canvas'].$curChart即可获取chart实例
 97 | 注意：
 98 | 1. 使用 this.$refs['uni-ec-canvas'].$curChart获取需要等组件初始化完毕后才能获取到chart实例
 99 | 
100 | 也可以通过监听组件的inited事件来获取实例
101 | 
102 | ```html
103 | <uni-ec-canvas @inited="inited" />
104 | ```
105 | 
106 | ```js
107 | export default {
108 |     methods: {
109 |            inited(curChart){
110 |                   console.log('这时候图表初始化完成了') 
111 |            }
112 |     }
113 | }
114 | 
115 | ### 如何延迟加载图表？
116 | 
117 | 参见 `examples/lazyLoad` 的例子，可以在获取数据后再初始化数据。
118 | 
119 | ### 如何在一个页面中加载多个图表？
120 | 
121 | 参见 `examples/multiCharts` 的例子。
122 | 
123 | ### 文件太大怎么办？
124 | 
125 | 本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件，为了便于开发，提供的是未压缩的版本。远程调试或预览可以下载 [echarts.min.js](https://github.com/apache/incubator-echarts/blob/master/dist/echarts.min.js) 压缩版本。
126 | 
127 | 发布时，如果对文件大小要求更高，可以在 [ECharts 在线定制](http://echarts.baidu.com/builder.html)网页下载仅包含必要组件的包，并且选择压缩。
128 | 
129 | 下载的文件放在 `uni-ec-canvas/echarts.js`，**注意一定需要重命名为 `echarts.js`**。
130 | 
131 | ## 微信版本要求
132 | 支持微信版本 >= 6.6.3，对应基础库版本 >= 1.9.91。尽可能使用更高版本的基础库版本。
133 | ### Canvas 2d 版本要求
134 | 最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 force-use-old-canvas="true" 的情况下，使用新的 Canvas 2d（默认）。
135 | 
136 | 使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启
137 | 
138 | 如果仍需使用旧版 Canvas，使用方法如下：
139 | ```
140 | <ec-canvas id="xxx" canvas-id="xxx" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
141 | ```
142 | 
143 | 
144 | 调试的时候，需要在微信开发者工具中，将“详情”下的“调试基础库”设为 1.9.91 及以上版本。
145 | 
146 | 发布前，需要在 [https://mp.weixin.qq.com](https://mp.weixin.qq.com) 的“设置”页面，将“基础库最低版本设置”设为 1.9.91。当用户微信版本过低的时候，会提示用户更新。
147 | 
148 | ## 暂不支持的功能
149 | 
150 | ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。
151 | 
152 | 以下功能尚不支持，如果有相关需求请在echarts-for-weixin的 [issue](https://github.com/ecomfe/echarts-for-weixin/issues) 中反馈，对于反馈人数多的需求将优先支持：
153 | 
154 | - 图片
155 | - 多个 zlevel 分层
156 | 
157 | 此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：
158 | 
159 | - 安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）
160 | - iOS 平台：半透明略有变深的问题
161 | - iOS 平台：渐变色出现在定义区域之外的地方
162 | 
163 | ## issue 
164 | 
165 | 如本项目有问题，欢迎在[issue](https://github.com/Zhuyi731/echarts-for-wx-uniapp/issues) 中向我们反馈，谢谢！
166 | 
167 | ## 常见问题及解决方案
168 | 以图形分类
169 | 
170 | ### 所有图  
171 | 1. 图表会覆盖弹窗，tab等页面组件上面  
172 | 原因: 微信小程序中 canvas为原生组件，拥有最高优先级。  
173 | 解决方案： 弹窗等需要覆盖图表的组件使用cover-view,cover-image来实现 详情请查看[小程序原生组件限制](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E9%99%90%E5%88%B6)  
174 | 
175 | 2. tooltip在手机上超出的部分不会显示   
176 | 原因： echart自身问题  
177 | 解决方案：需要通过判断点击的位置来动态设置tooltip的position  
178 | 
179 | 
180 | ### 饼状图  
181 | 1. 饼装图在安卓机下颜色中间会有颜色填充 如下图所示  
182 | ![饼状图被填充](./docs/pie-center-filled.jpeg)   
183 | 原因: echart自身bug，一直没有修复。当饼状图最后一个数据为0时，会已最后一个数据的颜色填充中间。    
184 | 解决方案:  
185 | 1.最后一个数据如果为0，强制设置为0.00001   
186 | 2.添加一个假数据,颜色设置为中间的颜色，但是这个数据不显示。数据如下(中间填充白色)   
187 | ``` json
188 | { 
189 |     value: 0, 
190 |     name: '', 
191 |     itemStyle: { color: '#ffffff' },
192 |      label: { show: false }, 
193 |      emphasis: { label: { show: false } } 
194 | }
195 | ```
196 | 
197 | 2. 饼状图禁用点击高亮(**hoverAnimation:false**)后标签和标签线虽然不显示了，但是高亮颜色还是会变化   
198 | 如下图所示:图1未点击，图2点击过后   
199 | ![点击之前](./docs/pie-not-click.jpeg)  
200 | ![点击之后](./docs/pie-clicked.jpeg) 
201 | 
202 | 解决方案：  
203 | 1.通过设置ec.stopTouchEvent来禁用点击事件，来放置用户点击    
204 | 2.通过设置高亮颜色和不高亮颜色一致来使得看起来没有变化   
205 | 


--------------------------------------------------------------------------------
/examples/multi-charts/multi-charts.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view>
  3 |     <uni-ec-canvas
  4 |       class="uni-ec-canvas"
  5 |       id="line-chart"
  6 |       canvas-id="multi-charts-line"
  7 |       :ec="ec"
  8 |     ></uni-ec-canvas>
  9 | 
 10 |     <uni-ec-canvas
 11 |       class="uni-ec-canvas"
 12 |       id="pie-chart"
 13 |       canvas-id="multi-charts-pie"
 14 |       :ec="ec2"
 15 |     ></uni-ec-canvas>
 16 |   </view>
 17 | </template>
 18 | 
 19 | <script>
 20 | import uniEcCanvas from "@/components/uni-ec-canvas/uni-ec-canvas";
 21 | export default {
 22 |   data() {
 23 |     return {
 24 |       ec: {
 25 |         option: {
 26 |           title: {
 27 |             text: ""
 28 |           },
 29 |           tooltip: {
 30 |             trigger: "axis",
 31 |             formatter: "{b}\r\n{c0}人",
 32 |             axisPointer: {
 33 |               type: "line",
 34 |               axis: "x",
 35 |               label: {
 36 |                 backgroundColor: "#000000"
 37 |               }
 38 |             }
 39 |           },
 40 |           grid: {
 41 |             left: "6%",
 42 |             right: "6%",
 43 |             top: "6%",
 44 |             bottom: "6%",
 45 |             containLabel: true
 46 |           },
 47 |           xAxis: {
 48 |             type: "category",
 49 |             boundaryGap: false,
 50 |             data: ["2-12", "2-14", "2-16", "2-18", "2-20", "2-22", "2-24"],
 51 |             axisLine: {
 52 |               // y轴
 53 |               show: false
 54 |             },
 55 |             axisTick: {
 56 |               // y轴刻度线
 57 |               show: false
 58 |             },
 59 |             splitLine: {
 60 |               // 网格线
 61 |               show: false
 62 |             }
 63 |           },
 64 |           yAxis: {
 65 |             type: "value",
 66 |             axisLine: {
 67 |               // y轴
 68 |               show: false
 69 |             },
 70 |             axisTick: {
 71 |               // y轴刻度线
 72 |               show: false
 73 |             },
 74 |             splitLine: {
 75 |               // 网格线
 76 |               show: false
 77 |             }
 78 |           },
 79 |           series: [
 80 |             {
 81 |               name: "浏览量",
 82 |               type: "line",
 83 |               smooth: true,
 84 |               areaStyle: {
 85 |                 color: {
 86 |                   type: "linear",
 87 |                   x: 0,
 88 |                   y: 0,
 89 |                   x2: 0,
 90 |                   y2: 1,
 91 |                   colorStops: [
 92 |                     {
 93 |                       offset: 0,
 94 |                       color: "#E50113" // 0% 处的颜色
 95 |                     },
 96 |                     {
 97 |                       offset: 1,
 98 |                       color: "#fff" // 100% 处的颜色
 99 |                     }
100 |                   ],
101 |                   global: false // 缺省为 false
102 |                 }
103 |               },
104 |               lineStyle: {
105 |                 color: "#EF5959"
106 |               },
107 |               data: [120, 132, 101, 134, 90, 230, 210]
108 |             }
109 |           ]
110 |         }
111 |       },
112 |       ec2: {
113 |         option: {
114 |           title: {
115 |             text: "7,5950",
116 |             left: "center",
117 |             top: "40%",
118 |             subtext: "客户总数",
119 |             subtextStyle: {
120 |               color: "#959595",
121 |               fontSize: 12,
122 |               align: "center"
123 |             },
124 |             textStyle: {
125 |               color: "#19193E",
126 |               fontSize: 23,
127 |               align: "center"
128 |             }
129 |           },
130 |           series: [
131 |             {
132 |               name: "访问来源",
133 |               type: "pie",
134 |               radius: ["40%", "60%"],
135 |               label: {
136 |                 position: "outside",
137 |                 color: "#19193E",
138 |                 normal: {
139 |                   show: false
140 |                 },
141 |                 emphasis: {
142 |                   show: true
143 |                 },
144 |                 fontSize: 10
145 |               },
146 |               labelLine: {
147 |                 normal: {
148 |                   show: false
149 |                 },
150 |                 emphasis: {
151 |                   show: true
152 |                 }
153 |               },
154 |               data: [
155 |                 {
156 |                   value: 3321,
157 |                   name: "直销中心",
158 |                   itemStyle: {
159 |                     normal: { color: "#EF5959" },
160 |                     emphasis: { color: "#EF5959" }
161 |                   }
162 |                 },
163 |                 {
164 |                   value: 1148,
165 |                   name: "手动录入",
166 |                   itemStyle: {
167 |                     normal: { color: "#ffa974" },
168 |                     emphasis: { color: "#ffa974" }
169 |                   }
170 |                 },
171 |                 {
172 |                   value: 2532,
173 |                   name: "线上访客",
174 |                   itemStyle: {
175 |                     normal: { color: "#ffc68a" },
176 |                     emphasis: { color: "#ffc68a" }
177 |                   }
178 |                 },
179 |                 {
180 |                   value: 1148,
181 |                   name: "线下拓客",
182 |                   itemStyle: { color: "#F0DD93" }
183 |                 },
184 |                 {
185 |                   value: 1148,
186 |                   name: "名片海报",
187 |                   itemStyle: { color: "#E7CB84" }
188 |                 },
189 |                 {
190 |                   value: 1148,
191 |                   name: "自然来访",
192 |                   itemStyle: { color: "#7EBD95" }
193 |                 },
194 |                 { value: 1148, name: "分享家", itemStyle: { color: "#687793" } }
195 |               ]
196 |             }
197 |           ]
198 |         }
199 |       }
200 |     };
201 |   },
202 |   onReady() {
203 |     setTimeout(() => {
204 |       this.ec.option.series[0].data = [1, 2, 3, 4, 5, 6, 7];
205 |       console.log("折线图数据改变啦");
206 |     }, 1000);
207 |     setTimeout(() => {
208 |       //数组内的数据要$set哦
209 |       this.ec2.option.series[0].data[0].value = 0;
210 |       console.log("折线图数据改变啦");
211 |     }, 2000);
212 |   },
213 |   components: {
214 |     uniEcCanvas
215 |   }
216 | };
217 | </script>
218 | 
219 | <style scoped>
220 | .uni-ec-canvas {
221 |   width: 750upx;
222 |   height: 750upx;
223 |   display: block;
224 | }
225 | </style>
226 | 


--------------------------------------------------------------------------------
/uni-ec-canvas/uni-ec-canvas.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <canvas type="2d" v-if="isUseNewCanvas" class="ec-canvas" :canvas-id="canvasId" @init="init" @touchstart="touchStart"
  3 |     @touchmove="touchMove" @touchend="touchEnd">
  4 |   </canvas>
  5 |   <canvas v-else class="ec-canvas" :canvas-id="canvasId" @init="init" @touchstart="touchStart" @touchmove="touchMove"
  6 |     @touchend="touchEnd">
  7 |   </canvas>
  8 | </template>
  9 | 
 10 | <script>
 11 |   import WxCanvas from "./wx-canvas";
 12 |   import * as echarts from "./echarts";
 13 | 
 14 |   let ctx;
 15 | 
 16 |   function wrapTouch(event) {
 17 |     for (let i = 0; i < event.touches.length; ++i) {
 18 |       const touch = event.touches[i];
 19 |       touch.offsetX = touch.x;
 20 |       touch.offsetY = touch.y;
 21 |     }
 22 |     return event;
 23 |   }
 24 | 
 25 |   export default {
 26 |     props: {
 27 |       canvasId: {
 28 |         type: String,
 29 |         default: () => {
 30 |           return "ec-canvas";
 31 |         }
 32 |       },
 33 |       ec: {
 34 |         type: Object
 35 |       },
 36 |       forceUseOldCanvas: {
 37 |         type: Boolean,
 38 |         value: false
 39 |       }
 40 |     },
 41 |     data() {
 42 |       return {
 43 |         $curChart: {},
 44 |         toHandleList: [],
 45 |         isUseNewCanvas: true
 46 |       };
 47 |     },
 48 |     watch: {
 49 |       "ec.option": {
 50 |         deep: true,
 51 |         handler(val, oldVal) {
 52 |           this.setOption(val);
 53 |         }
 54 |       }
 55 |     },
 56 |     onReady: function() {
 57 |       if (!this.ec) {
 58 |         console.warn(
 59 |           '组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' +
 60 |           'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'
 61 |         );
 62 |         return;
 63 |       }
 64 |       if (!this.ec.lazyLoad) {
 65 |         this.init();
 66 |       }
 67 |     },
 68 |     methods: {
 69 |       compareVersion(v1, v2) {
 70 |         v1 = v1.split(".");
 71 |         v2 = v2.split(".");
 72 |         const len = Math.max(v1.length, v2.length);
 73 | 
 74 |         while (v1.length < len) {
 75 |           v1.push("0");
 76 |         }
 77 |         while (v2.length < len) {
 78 |           v2.push("0");
 79 |         }
 80 | 
 81 |         for (let i = 0; i < len; i++) {
 82 |           const num1 = parseInt(v1[i]);
 83 |           const num2 = parseInt(v2[i]);
 84 | 
 85 |           if (num1 > num2) {
 86 |             return 1;
 87 |           } else if (num1 < num2) {
 88 |             return -1;
 89 |           }
 90 |         }
 91 |         return 0;
 92 |       },
 93 |       init(callback) {
 94 |         const version = wx.getSystemInfoSync().SDKVersion;
 95 | 
 96 |         let canUseNewCanvas = this.compareVersion(version, "2.9.0") >= 0;
 97 |         if (this.forceUseOldCanvas) {
 98 |           if (canUseNewCanvas) console.warn("开发者强制使用旧canvas,建议关闭");
 99 |           canUseNewCanvas = false;
100 |         }
101 |         this.isUseNewCanvas = canUseNewCanvas && !this.forceUseOldCanvas;
102 |         if (this.isUseNewCanvas) {
103 |           console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
104 |           // 2.9.0 可以使用 <canvas type="2d"></canvas>
105 |           this.initByNewWay(callback);
106 |         } else {
107 |           const isValid = this.compareVersion(version, "1.9.91") >= 0;
108 |           if (!isValid) {
109 |             console.error(
110 |               "微信基础库版本过低，需大于等于 1.9.91。" +
111 |               "参见：https://github.com/ecomfe/echarts-for-weixin" +
112 |               "#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82"
113 |             );
114 |             return;
115 |           } else {
116 |             console.warn(
117 |               "建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能"
118 |             );
119 |             this.initByOldWay(callback);
120 |           }
121 |         }
122 |       },
123 |       initByOldWay(callback) {
124 |         // 1.9.91 <= version < 2.9.0：原来的方式初始化
125 |         ctx = wx.createCanvasContext(this.canvasId, this);
126 |         const canvas = new WxCanvas(ctx, this.canvasId, false);
127 |         const that = this
128 |         echarts.setCanvasCreator(() => {
129 |           return canvas;
130 |         });
131 |         // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
132 |         const canvasDpr = 1;
133 |         var query = wx.createSelectorQuery().in(this);
134 |         query
135 |           .select(".ec-canvas")
136 |           .boundingClientRect(res => {
137 |             if (typeof callback === "function") {
138 |               that.$curChart = callback(canvas, res.width, res.height, canvasDpr);
139 |             } else if (that.ec) {
140 |               that.$curChart = that.initChart(canvas, res.width, res.height, canvasDpr)
141 |             } else {
142 |               that.triggerEvent("init", {
143 |                 canvas: canvas,
144 |                 width: res.width,
145 |                 height: res.height,
146 |                 devicePixelRatio: canvasDpr // 增加了dpr，可方便外面echarts.init
147 |               });
148 |             }
149 |           })
150 |           .exec();
151 |       },
152 |       initByNewWay(callback) {
153 |         const that = this
154 |         // version >= 2.9.0：使用新的方式初始化
155 |         const query = wx.createSelectorQuery().in(this);
156 |         query
157 |           .select(".ec-canvas")
158 |           .fields({
159 |             node: true,
160 |             size: true
161 |           })
162 |           .exec(res => {
163 |             const canvasNode = res[0].node;
164 | 
165 |             const canvasDpr = wx.getSystemInfoSync().pixelRatio;
166 |             const canvasWidth = res[0].width;
167 |             const canvasHeight = res[0].height;
168 | 
169 |             const ctx = canvasNode.getContext("2d");
170 | 
171 |             const canvas = new WxCanvas(ctx, that.canvasId, true, canvasNode);
172 |             echarts.setCanvasCreator(() => {
173 |               return canvas;
174 |             });
175 | 
176 |             if (typeof callback === "function") {
177 |               that.$curChart = callback(
178 |                 canvas,
179 |                 canvasWidth,
180 |                 canvasHeight,
181 |                 canvasDpr
182 |               );
183 |             } else if (that.ec) {
184 |               that.$curChart = that.initChart(canvas, canvasWidth, canvasHeight, canvasDpr)
185 |             } else {
186 |               that.triggerEvent("init", {
187 |                 canvas: canvas,
188 |                 width: canvasWidth,
189 |                 height: canvasHeight,
190 |                 devicePixelRatio: canvasDpr
191 |               });
192 |             }
193 |           });
194 |       },
195 |       setOption(val) {
196 |         if (!this.$curChart || !this.$curChart.setOption) {
197 |           this.toHandleList.push(val);
198 |         } else {
199 |           this.$curChart.setOption(val);
200 |         }
201 |       },
202 |       canvasToTempFilePath(opt) {
203 |         if (this.isUseNewCanvas) {
204 |           // 新版
205 |           const query = wx.createSelectorQuery().in(this);
206 |           query
207 |             .select(".ec-canvas")
208 |             .fields({
209 |               node: true,
210 |               size: true
211 |             })
212 |             .exec(res => {
213 |               const canvasNode = res[0].node;
214 |               opt.canvas = canvasNode;
215 |               wx.canvasToTempFilePath(opt);
216 |             });
217 |         } else {
218 |           // 旧的
219 |           if (!opt.canvasId) {
220 |             opt.canvasId = this.canvasId;
221 |           }
222 |           ctx.draw(true, () => {
223 |             wx.canvasToTempFilePath(opt, this);
224 |           });
225 |         }
226 |       },
227 | 
228 |       touchStart(e) {
229 |         if (this.ec.stopTouchEvent) {
230 |           e.preventDefault();
231 |           e.stopPropagation();
232 |           return;
233 |         }
234 |         this.$emit("touchstart", e);
235 |         if (this.$curChart && e.touches.length > 0) {
236 |           var touch = e.touches[0];
237 |           var handler = this.$curChart.getZr().handler;
238 |           if (handler) {
239 |             handler.dispatch("mousedown", {
240 |               zrX: touch.x,
241 |               zrY: touch.y
242 |             });
243 |             handler.dispatch("mousemove", {
244 |               zrX: touch.x,
245 |               zrY: touch.y
246 |             });
247 |             handler.processGesture(wrapTouch(e), "start");
248 |           }
249 |         }
250 |       },
251 | 
252 |       touchMove(e) {
253 |         if (this.ec.stopTouchEvent) {
254 |           e.preventDefault();
255 |           e.stopPropagation();
256 |           return;
257 |         }
258 |         this.$emit("touchmove", e);
259 |         if (this.$curChart && e.touches.length > 0) {
260 |           var touch = e.touches[0];
261 |           var handler = this.$curChart.getZr().handler;
262 |           if (handler) {
263 |             handler.dispatch("mousemove", {
264 |               zrX: touch.x,
265 |               zrY: touch.y
266 |             });
267 |             handler.processGesture(wrapTouch(e), "change");
268 |           }
269 |         }
270 |       },
271 | 
272 |       touchEnd(e) {
273 |         if (this.ec.stopTouchEvent) {
274 |           e.preventDefault();
275 |           e.stopPropagation();
276 |           return;
277 |         }
278 |         this.$emit("touchend", e);
279 |         if (this.$curChart) {
280 |           const touch = e.changedTouches ? e.changedTouches[0] : {};
281 |           var handler = this.$curChart.getZr().handler;
282 |           if (handler) {
283 |             handler.dispatch("mouseup", {
284 |               zrX: touch.x,
285 |               zrY: touch.y
286 |             });
287 |             handler.dispatch("click", {
288 |               zrX: touch.x,
289 |               zrY: touch.y
290 |             });
291 |             handler.processGesture(wrapTouch(e), "end");
292 |           }
293 |         }
294 |       },
295 | 
296 |       initChart(canvas, width, height, canvasDpr) {
297 |         this.$curChart = echarts.init(canvas, null, {
298 |           width: width,
299 |           height: height,
300 |           devicePixelRatio: canvasDpr
301 |         });
302 |         canvas.setChart(this.$curChart);
303 |         this.$curChart.setOption(this.ec.option);
304 |         this.$emit('inited', this.$curChart)
305 |         return this.$curChart
306 |       }
307 |     }
308 |   };
309 | </script>
310 | 
311 | <style lang="scss">
312 |   .ec-canvas {
313 |     width: 100%;
314 |     height: 100%;
315 |     display: block;
316 |   }
317 | </style>
318 | 


--------------------------------------------------------------------------------