微信小程序引入echarts

一、下载

https://github.com/ecomfe/echarts-for-weixinhttps://github.com/ecomfe/echarts-for-weixin

二、引入小程序配置

1.解压下载文件

2.复制粘贴’ec-canvas‘文件

3.将复制粘贴的文件放到小程序根目录当中

4.在自己需要的页面中引入 

三、使用 Echarts 绘制图表 

1.index.wxml

<scroll-view class=\"scroll_view\" scroll-y=\"{{true}}\" bindscroll=\"scrollPage\" scroll-top=\"{{scrollTop}}\" scroll-into-view=\"{{toView}}\">   <ec-canvas id=\"mychart\" canvas-id=\"mychart-bar\" ec=\"{{ ec }}\">  

2.在index.js当中引入并且配置option:

// index.js//第一步引入echarts import * as echarts from \'./../../ec-canvas/echarts\';//第二步配置optinofunction initChart(canvas, width, height) { console.log(\'canvas\',width, height); const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { xAxis: { type: \'category\', boundaryGap: false, // data: [\'最低价\', \'本房源\', \'最高价\'], axisLabel: { show: false // 设置为false，不显示x轴刻度数字 } }, yAxis: { type: \'value\', axisLabel: { show: false // 设置为false，不显示y轴刻度数字 } }, series: [ { data: [\'20\',\'50\',\'80\'], type: \'line\', color: \'#EA3333\', areaStyle: { color: { type: \'linear\', x: 0, y: 0, x2: 0, y2: 1, colorStops: [  { offset: 0, color: \'#ea333300\' },  { offset: 1, color: \'#ea333321\' } ], global: false } }, label: { show: true, position: \'top\', backgroundColor: \'#6A6A6A\', // 添加标签背景颜色 color: \'#ffff\', height: \'20\', width: \'80\', distance: 10, // 设置文字与节点的距离为 20 verticalAlign: \'center\', fontSize: \'10\',  } } ] }; chart.setOption(option); return chart;}//第三步初始化折线图Page({ data: { ec: { onInit: initChart }, }, })

 3.index.wxss设置样式

.statistical-chart { width: 100%; height: 200rpx; margin-top: 20rpx; display: flex; align-items: center; justify-content: center;}ec-canvas{ width: 100%; height: 100%;}.scroll_view { height: 2500rpx;}

四、微信小程序引用Echarts绘图显示模糊解决办法