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


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


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


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## 简介  
  2 | 本项目是 ECharts 的微信小程序版本，以及使用的示例。  
  3 |   
  4 | 该项目对[ecomfe/echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin)做了少量改动来兼容uni-app     
  5 |   
  6 | 需要通过uni-app编译后使用     
  7 |   
  8 | 如果你需要使用原生小程序开发方式，请移步[ecomfe/echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin)    
  9 |   
 10 | 开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。    
 11 | 
 12 | ## 文件目录结构  
 13 | 
 14 | 为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
 15 | 
 16 | 其中，`uni-ec-canvas` 是我们提供的组件，其他文件是如何使用该组件的示例。  
 17 | 
 18 | lazy-load为懒加载示例    
 19 | 
 20 | multi-charts为一个页面中多个表格的示例    
 21 | 
 22 | 其余示例请移步[官方示例](https://www.echartsjs.com/examples/zh/index.html)   
 23 | 
 24 | 然后将option替换即可  
 25 | 
 26 | `uni-ec-canvas` 目录下有一个 `echarts.js`，默认是包含所有功能的echarts。如有可以，建议从[官网自定义构建](http://echarts.baidu.com/builder.html)来替换这个文件以减小文件大小。  
 27 | 
 28 | ## 使用  
 29 | 复制uni-ec-canvas至你公用的组件文件夹   
 30 | 在页面中引入  
 31 | 
 32 | ```html 
 33 | <template>
 34 |     <view>
 35 |        <uni-ec-canvas 
 36 |           class="uni-ec-canvas"
 37 |           id="uni-ec-canvas"
 38 |           ref="uni-ec-canvas"
 39 |           canvas-id="uni-ec-canvas"
 40 |           :ec="ec"
 41 |        ></uni-ec-canvas>
 42 |     </view>
 43 | </template>
 44 | ```
 45 | ```js 
 46 | <script>
 47 | // 此处将路径替换为你放置该组件的路径  
 48 | import uniEcCanvas from './uni-ec-canvas/ec-canvas.vue'  
 49 | 
 50 | export default{
 51 |     data(){
 52 |         return {
 53 |             ec:{
 54 |                 options:{} //echart 配置项
 55 |             }
 56 |         }
 57 |     },
 58 |     components:{
 59 |         uniEcCanvas
 60 |     }
 61 | }
 62 | </script>
 63 | ```
 64 | ```css
 65 | // 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
 66 | <style>
 67 | .uni-ec-canvas{
 68 |     width:100%;
 69 |     height:100%;
 70 |     display:block;
 71 | }
 72 | </style>
 73 | ```
 74 | 
 75 | ## FAQ
 76 | ### uni-app 编译卡死  
 77 | 如果你配置了eslint检查，请屏蔽对echart.js的检查，否则会卡死
 78 | 
 79 | ### 如何改变数据  
 80 | 改变ec.option中的值图表即可动态变化  注意新增属性请使用$set
 81 | 
 82 | ### 如何获取图表实例？
 83 | 
 84 | 在页面中使用 this.$refs['uni-ec-canvas'].$curChart即可获取chart实例
 85 | 
 86 | ### 如何延迟加载图表？
 87 | 
 88 | 参见 `examples/lazyLoad` 的例子，可以在获取数据后再初始化数据。
 89 | 
 90 | ### 如何在一个页面中加载多个图表？
 91 | 
 92 | 参见 `examples/multiCharts` 的例子。
 93 | 
 94 | ### 文件太大怎么办？
 95 | 
 96 | 本项目默认提供的 ECharts 文件是最新版本的包含所有组件文件，为了便于开发，提供的是未压缩的版本。远程调试或预览可以下载 [echarts.min.js](https://github.com/apache/incubator-echarts/blob/master/dist/echarts.min.js) 压缩版本。
 97 | 
 98 | 发布时，如果对文件大小要求更高，可以在 [ECharts 在线定制](http://echarts.baidu.com/builder.html)网页下载仅包含必要组件的包，并且选择压缩。
 99 | 
100 | 下载的文件放在 `uni-ec-canvas/echarts.js`，**注意一定需要重命名为 `echarts.js`**。
101 | 
102 | ## 微信版本要求
103 | 支持微信版本 >= 6.6.3，对应基础库版本 >= 1.9.91。尽可能使用更高版本的基础库版本。
104 | ### Canvas 2d 版本要求
105 | 最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 force-use-old-canvas="true" 的情况下，使用新的 Canvas 2d（默认）。
106 | 
107 | 使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启
108 | 
109 | 如果仍需使用旧版 Canvas，使用方法如下：
110 | ```
111 | <ec-canvas id="xxx" canvas-id="xxx" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
112 | ```
113 | 
114 | 
115 | 调试的时候，需要在微信开发者工具中，将“详情”下的“调试基础库”设为 1.9.91 及以上版本。
116 | 
117 | 发布前，需要在 [https://mp.weixin.qq.com](https://mp.weixin.qq.com) 的“设置”页面，将“基础库最低版本设置”设为 1.9.91。当用户微信版本过低的时候，会提示用户更新。
118 | 
119 | ## 暂不支持的功能
120 | 
121 | ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。
122 | 
123 | 以下功能尚不支持，如果有相关需求请在echarts-for-weixin的 [issue](https://github.com/ecomfe/echarts-for-weixin/issues) 中反馈，对于反馈人数多的需求将优先支持：
124 | 
125 | - 图片
126 | - 多个 zlevel 分层
127 | 
128 | 此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：
129 | 
130 | - 安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）
131 | - iOS 平台：半透明略有变深的问题
132 | - iOS 平台：渐变色出现在定义区域之外的地方
133 | 
134 | ## issue 
135 | 
136 | 如本项目有问题，欢迎在[issue](https://github.com/yah0130/echarts-wx-uniapp/issues) 中向我们反馈，谢谢！
137 | 
138 | ## 常见问题及解决方案
139 | 以图形分类
140 | 
141 | ### 所有图  
142 | 1. 图表会覆盖弹窗，tab等页面组件上面  
143 | 原因: 微信小程序中 canvas为原生组件，拥有最高优先级。  
144 | 解决方案： 弹窗等需要覆盖图表的组件使用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)  
145 | 
146 | 2. tooltip在手机上超出的部分不会显示   
147 | 原因： echart自身问题  
148 | 解决方案：需要通过判断点击的位置来动态设置tooltip的position  
149 | 
150 | 3. 格式化需要传入function无效
151 | 原因： 被序列化掉了
152 | 解决方案：需要手动setOption，例子如下：
153 | 
154 | ```html
155 | <template>
156 |   <view>
157 |     <uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec"></uni-ec-canvas>
158 |   </view>
159 | </template>
160 | 
161 | <script>
162 |   import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
163 |   import * as echarts from '@/components/uni-ec-canvas/echarts'
164 |   let chart = null
165 |   export default {
166 |     data() {
167 |       return {
168 |         ec: {
169 |           lazyLoad: true
170 |         },
171 |         option: {
172 |           title: {
173 |             text: ''
174 |           },
175 |           tooltip: {
176 |             trigger: 'axis',
177 |             formatter: '{b}\r\n{c0}人',
178 |             axisPointer: {
179 |               type: 'line',
180 |               axis: 'x',
181 |               label: {
182 |                 backgroundColor: '#000000'
183 |               }
184 |             }
185 |           },
186 |           grid: {
187 |             left: '6%',
188 |             right: '6%',
189 |             top: '6%',
190 |             bottom: '6%',
191 |             containLabel: true
192 |           },
193 |           xAxis: {
194 |             type: 'category',
195 |             boundaryGap: false,
196 |             data: ['2-12', '2-14', '2-16', '2-18', '2-20', '2-22', '2-24'],
197 |             axisLine: {
198 |               // y轴
199 |               show: false
200 |             },
201 |             axisTick: {
202 |               // y轴刻度线
203 |               show: false
204 |             },
205 |             splitLine: {
206 |               // 网格线
207 |               show: false
208 |             }
209 |           },
210 |           yAxis: {
211 |             type: 'value',
212 |             axisLine: {
213 |               // y轴
214 |               show: false
215 |             },
216 |             axisTick: {
217 |               // y轴刻度线
218 |               show: false
219 |             },
220 |             splitLine: {
221 |               // 网格线
222 |               show: false
223 |             }
224 |           },
225 |           series: [{
226 |             name: '浏览量',
227 |             type: 'line',
228 |             smooth: true,
229 |             lineStyle: {
230 |               color: '#EF5959'
231 |             },
232 |             data: [120, 132, 101, 134, 90, 230, 210]
233 |           }]
234 |         }
235 |       };
236 |     },
237 |     methods: {
238 |       initChart(canvas, width, height, canvasDpr) {
239 |         console.log(canvas, width, height, canvasDpr)
240 |         chart = echarts.init(canvas, null, {
241 |           width: width,
242 |           height: height,
243 |           devicePixelRatio: canvasDpr
244 |         })
245 |         canvas.setChart(chart)
246 |         chart.setOption(this.option)
247 |         return chart
248 |       },
249 |     },
250 |     onUnload() {
251 |       chart = null
252 |     },
253 |     onLoad() {
254 |       this.$refs.canvas.init(this.initChart)
255 |     }
256 |   }
257 | </script>
258 | 
259 | <style scoped>
260 |   .uni-ec-canvas {
261 |     width: 100%;
262 |     height: 100vh; 
263 |     display: block;
264 |   }
265 | </style>
266 | ```
267 | 
268 | 
269 | ### 饼状图  
270 | 1. 饼装图在安卓机下颜色中间会有颜色填充 如下图所示  
271 | ![饼状图被填充](./docs/pie-center-filled.jpeg)   
272 | 原因: echart自身bug，一直没有修复。当饼状图最后一个数据为0时，会已最后一个数据的颜色填充中间。    
273 | 解决方案:  
274 | 1.最后一个数据如果为0，强制设置为0.00001   
275 | 2.添加一个假数据,颜色设置为中间的颜色，但是这个数据不显示。数据如下(中间填充白色)   
276 | ``` json
277 | { 
278 |     value: 0, 
279 |     name: '', 
280 |     itemStyle: { color: '#ffffff' },
281 |      label: { show: false }, 
282 |      emphasis: { label: { show: false } } 
283 | }
284 | ```
285 | 
286 | 2. 饼状图禁用点击高亮(**hoverAnimation:false**)后标签和标签线虽然不显示了，但是高亮颜色还是会变化   
287 | 如下图所示:图1未点击，图2点击过后   
288 | ![点击之前](./docs/pie-not-click.jpeg)  
289 | ![点击之后](./docs/pie-clicked.jpeg) 
290 | 
291 | 解决方案：  
292 | 1.通过设置ec.stopTouchEvent来禁用点击事件，来放置用户点击    
293 | 2.通过设置高亮颜色和不高亮颜色一致来使得看起来没有变化   


--------------------------------------------------------------------------------
/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.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.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 |       }
305 |     }
306 |   };
307 | </script>
308 | 
309 | <style lang="scss">
310 |   .ec-canvas {
311 |     width: 100%;
312 |     height: 100%;
313 |     display: block;
314 |   }
315 | </style>
316 | 


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