1、clone官方库echarts-for-weixin到本地，将其中的ec-canvas目录复制到自己项目的某个目录下（如components）
2、在自己的组件或页面中（.json文件），按如下方式使用，路径根据自己的项目具体设置
{ "usingComponents": { "ec-canvas": "../components/ec-canvas/ec-canvas" } }
3、在页面中引用(.wxml)
样式：
/* 折线图 */
.overview-charts {
width: 100%;
height: 560rpx;
}
<view class="overview-charts"> <ec-canvas style="width: 100%; height: 560rpx;z-index: 1;" id="my-analysis-chart" canvas-id="my-analysis-line" ec="{{ overviewChart }}"></ec-canvas> </view>
4、在.js文件中，获取图标数据，然后获取echarts实例，设置数据和配置项
data: { overviewChart: { // 将 lazyLoad 设为 true 后，需要手动初始化图表 lazyLoad: true }, } // 折线图 initLineChart(chartData) { let myAnalysisComponent = this.selectComponent('#my-analysis-chart'); myAnalysisComponent.init((canvas, width, height, dpr) => { // 获取组件的 canvas、width、height 后的回调函数 // 初始化图表 const lineChart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.setLineChartOption(lineChart, chartData) return lineChart; }); }, setLineChartOption(chart, chartData) { const option = { grid: { top: 10, left: '2%', right: '2%', bottom: '3%', containLabel: true }, tooltip: { trigger: 'item', borderColor: '#FFFFFF', formatter: (params) => { console.log('params--',params); let str = params.name + '\n' str += `${params.marker}${params.seriesName}: ${params.value}` return str; } }, dataZoom: [ //滑动条 { xAxisIndex: 0, //这里是从X轴的0刻度开始 show: true, //是否显示滑动条，不影响使用 type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 startValue: 0, // 从头开始。 endValue: 6, // 一次性展示6个。 zoomLock: false, }, ], xAxis: { type: 'category', data: chartData.xdata || [], axisLabel: { interval: 0, rotate: 70 } }, yAxis: { minInterval: 1, type: 'value' }, series: [ { name: '折线图', lineStyle: { color: '#0075EF' }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(0,117,239,0.15)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(0,117,239,0)' // 100% 处的颜色 }], global: false // 缺省为 false } }, symbol: 'circle', symbolSize: '6', itemStyle: { // 设置symbol的颜色 normal: { color: '#0075EF' } }, data: chartData.ydata || [], type: 'line' } ] }; chart.setOption(option); return chart; },
