vue项目中使用echarts

1、安装

npm install echarts --save
1

2、在vue中引入（全局引入）

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
1
2
3

3、在vue中的使用

1）定义一个盒子，设置宽高

<template>
  <div ref="chart" style="width: 100%; height: 200px"></div>
</template>
1
2
3

2)在data中（其他地方定义也可以，根据项目需求来）定义option数据

dt = [10,20,30,5,10]
 option = {
    // 提示框
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    color: ['#D9D9D9', '#0077FF', '#FFCD29', '#B37700', '#FF4455'],
    // 数据系列
    xAxis: [
      {
        type: 'category',
        data: ['未知', '低危', '中危', '高危', '超危'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '数量',
        type: 'bar',  // type: bar 是柱形， category是折线
        barWidth: '60%',
        data: this.dt,
        colorBy: 'data',
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top'
            }
          }
        }
      }
    ]
  }

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

3)初始化echart实例以及数据

methods:{
	 initChart() {
    const dom = this.$refs['chart']  // 获取dom
    if (dom) {
      this.chart = this.$echarts.init(dom)  //  初始化echart, 加载配置
    }
  }
}
created(){
	this.initChart()
}

1
2
3
4
5
6
7
8
9
10
11
12

项目中完整版代码：

<template>
<!-- 给定一个盒子，设置宽高 -->
  <div ref="chart" style="width: 100%; height: 200px"></div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { EChartsType } from 'echarts'
export default class ChartTemplate extends ChartTemplateProps {
  $refs!: {
    chart: HTMLDivElement
  }
  dt = [10,20,30,5,10]

  chart = null as null | EChartsType

  image = ''
// 定义option配置对象，放入数据
  option = {
    // 提示框
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    color: ['#D9D9D9', '#0077FF', '#FFCD29', '#B37700', '#FF4455'],
    // 数据系列
    xAxis: [
      {
        type: 'category',
        data: ['未知', '低危', '中危', '高危', '超危'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '数量',
        type: 'bar',  // type: bar 是柱形， category是折线
        barWidth: '60%',
        data: this.dt,
        colorBy: 'data',
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top'
            }
          }
        }
      }
    ]
  }

  initChart() {
    const dom = this.$refs['chart']  // 获取dom
    if (dom) {
      this.chart = this.$echarts.init(dom)  //  初始化echart, 加载配置
      this.chart.setOption(this.option) // 如果需要修改数据或者配置，调用setOption()方法，传入配置即可，不需要再次init()初始化
      this.transform2ImageUrl()
    }
  }

  updateChart() {
    if (this.chart) {
      this.chart.setOption({
        series: [{ data: this.dt }]
      })
      this.transform2ImageUrl()
    } else {
      this.initChart()
    }
  }

  transform2ImageUrl() {
    console.log('2222', this.chart)
    // 转换图片前重新定宽高，保证图片比例正确，必须异步执行
    setTimeout(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 0)
    setTimeout(() => {
      this.image = this.chart?.getDataURL({  // 导出echarts一般是将其转成图片，图片展示
        pixelRatio: 2,
        backgroundColor: '#fff'
      }) as string
    }, 2000)
  }
  mounted() {
    this.initChart()
  }
}
</script>

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108