Taro + vue 的微信小程序中使用 echarts_taro vue 框架微信小程序 引入图表

1. 使用github上的echarts-for-weixin

2. 把此文件夹放在项目的components文件夹下
taro+vue项目，ec-canvas是原生小程序，也无妨，一样放下边。

3. 在 report/index.vue 页面中需要使用echarts，在 report/index.config.js 中加入以下代码

export default {
  usingComponents: {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}
1
2
3
4
5

4. 在 report/index.vue 页面中需要引入

import * as echarts from '../../components/ec-canvas/echarts'
1

5. 在 report/index.vue 页面中使用组件

<!-- :force-use-old-canvas="true" 开发时加上防止不随页面滚动，但是上到环境要去掉-->
<view class="myChart" style="width: 100%; height: 300px">
	<ec-canvas
		id="mychart-dom-line"
		canvas-id="mychart-line"
		:ec="ec"
		:force-use-old-canvas="true"
    ></ec-canvas>
</view>
1
2
3
4
5
6
7
8
9

	// 图表配置
	ec: {
		onInit: this.initChart,
	},
    chart: null,
    chartOptions: {
        color: ['#91CC75', '#F7B500', '#FF3333', '#0091FF'],
		legend: {},
        grid: {
          left: '3%',
          right: '3%',
          top: '90',
          bottom: '2%',
          containLabel: true
        },
		tooltip: {
			trigger: 'axis',
          	position: ['30%', '30%'],
          	backgroundColor: 'rgba(255, 255, 255, 0.6)',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985',
				},
			},
		},
		xAxis: { type: 'category', boundaryGap: false},
		yAxis: { type: 'value', name: '单位（）', },
        series: [
          { type: 'line', stack: 'Total', areaStyle: {} },
          { type: 'line', stack: 'Total', areaStyle: {} },
          { type: 'line', stack: 'Total', areaStyle: {} },
          { type: 'line', stack: 'Total', areaStyle: {} }
        ],
        dataset: {
          source: [
            ['product', '图例1', '图例2', '图例3', '图例4'],
            ['1月', 43.3, 85.8, 93.7, 100],
            ['2月', 83.1, 73.4, 55.1, 60],
          ]
        }
      },


	// 初始化
	initChart(canvas, width, height, dpr) {
		this.chart = echarts.init(canvas, null, {
			width: width,
			height: height,
			devicePixelRatio: dpr, // 像素
		})
		canvas.setChart(this.chart)
		this.chart.setOption(this.chartOptions)
		// 获取接口数据
		this._getApi()
		return this.chart
	},


	// 更新
	update() {
		this.chartOptions.dataset.source = [
				[ 'product', '图例1', '图例2', '图例3', '图例4' ],
				...数组集合,
			]
		this.chart.setOption(this.chartOptions)
	},

	_getApi() {
		api(params).then(res => {
			this.chartOptions.dataset.source = [
				[ 'product', '图例1', '图例2', '图例3', '图例4' ],
				...res.data,
			]
			// 更新chart
			this.chart.setOption(this.chartOptions)
		})
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78