Vue中引入echarts的步骤

一、安装echarts

npm i echarts
1

二、引入echarts

1.全局引入

在main.js文件中：

//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts;
1
2
3
4

2.局部引入

let echarts = require(‘echarts’);
1

或者

import * as echarts from "echarts";
1

注意：如果echarts的版本在5.0以上，只能局部引入，全局引入会出错（好像是这样，如果不对欢迎指正）

三、vue中使用echarts

1.准备好函数

准备一个函数，并在挂载时调用

<script>
import * as echarts from "echarts";
export default {
    name: 'MyData',
    data() {
        return {

        };
    },
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {

        }
    },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.准备一个容器来放echarts

配置好ref属性，用于后面初始化容器获取DOM

<div ref="chart">div>
1

3.初始化容器

使用init函数

methods: {
     echartsInit() {
     		//初始化容器
			const myChart = echarts.init(this.$refs.pro_chart); 
      }
  },
1
2
3
4
5
6

4.调节配置项

option配置项从这里搞：echarts官方文档示例

echartsInit() {
        const myChart = echarts.init(this.$refs.pro_chart); //初始化容器
        const option = {这里面就是图表的各种配置项，从官方文档搞下来};
  }
1
2
3
4

5.配置项放入容器，绘制图表

echartsInit() {
	     const myChart = echarts.init(this.$refs.chart); //初始化容器
	     const option = {这里面就是图表的各种配置项，从官方文档搞下来};
	     myChart.setOption(option);
 }
1
2
3
4
5

四、一些常用的配置项

1.折线图

option = {
    title: {
        text: '标题'
    },
    //图例的相关设置
    legend: {
    	x:'center', //水平位置
	    y:'bottom', //垂直方向位置
	    padding: [10,0,0,0], //上右下左距离
	    itemWidth: 30,  //图例宽
        itemHeight: 30, //图例高
        textStyle: {  //图例的字体样式
            fontSize: 26,  
            color: '#666',
        },
	    data: ['类目1', '类目2'], //图例名字，要和数据的name对应
	 },
    //这是鼠标移到某个数据上显示的面板配置
    tooltip: {
        trigger: 'item',
        triggerOn: 'click',
        axisPointer: {
            type: 'none'
        },
        formatter: function () {
            return '17.5KG'
        }
    },
    //这是一些工具，比如下面这个saveAsImage是保存为图片的选项
    toolbox: {
        show: false,
        feature: {
            saveAsImage: {}
        }
    },
    //图的距离
    grid: {
        left: '3%',
        right: '4%',
        bottom: '5%',
        top: '5%',
        containLabel: true
    },
    //x轴相关配置
    xAxis: {
        type: 'category',
        boundaryGap: false, //坐标值是展示在小头头上还是展示在头头之间，你懂的
        axisLabel: {
            //设置x轴的展示间隔
            interval: 0,
            //x轴坐标文字换行
            formatter: function (value, index) {
                var num = 5; //每行显示字数 
                var str = "";
                var valLength = value.length; //该项x轴字数  
                var rowNum = Math.ceil(valLength / num); // 行数  
                if (rowNum > 1) {
                    for (var i = 0; i < rowNum; i++) {
                        var temp = "";
                        var start = i * num;
                        var end = start + num;
                        temp = value.substring(start, end) + "\n";
                        str += temp;
                    }
                    return str;
                } else {
                    return value;
                }
            }
        },
        //刻度相关配置：
        axisTick: {
            show: false,//去掉刻度
        },
        //轴线相关配置：
        axisLine: {
            show: false,  //去掉y轴的线
            lineStyle: {color: '#ccc'},  //设置轴线颜色
        },
        // prettier-ignore
        data: ['1','1''1''1''1''1''1''1']
    },
    yAxis: {
        type: 'value',
        //隐藏y轴的横线
        splitLine: {
            show: false
        },
        //设置y轴的初始值和结束值
        min: '20',
        max: '24.5',
        splitNumber: 9,  //设置y轴的间隔
        axisLabel: {
            formatter: function (value) {
                //保留一位小数并且加上单位
                return value.toFixed(1) + ' °C';
            }
        },
        axisPointer: {
            snap: true
        },
        //刻度相关配置：
        axisTick: {
            show: false,//去掉刻度
        },
        //轴线相关配置：
        axisLine: {
            show: false,  //去掉y轴的线
            lineStyle: {color: '#ccc'},  //设置轴线颜色
        },
    },
    series: [
        {
            name: '类目1',
            type: 'line',
            lineStyle: {
                color: 'rgb(118, 162, 255, 1)', //改变折线颜色
                normal: {
                    opacity: 0, //透明度，0隐藏1显示
                }
            },
            showSymbol: true,  //显示隐藏小圆点
            itemStyle: {
                color: 'RGBA(118, 162, 255, 1)', //小圆点的颜色
            },
            showBackground: true, //是否展示背景
            backgroundStyle: {
                color: 'RGBA(255, 228, 218, 1)'  //背景色
            },
            smooth: true, //数据是否平滑连接
            data: [21.1, 22.1, 23.5, 23.2, 22.5, 23.2, 22.1],
        },
        {
            name: '类目2',
            type: 'line',
            lineStyle: {
                color: 'rgb(63, 207, 153, 1)', //改变折线颜色
                normal: {
                    opacity: 1, //透明度，0隐藏1显示
                }
            },
            showSymbol: true,  //显示隐藏折线上的小圆点
            itemStyle: {
                color: 'RGBA(63, 207, 153, 1)'
            },
            smooth: true,//数据是否平滑连接
            data: [21.3, 22.8, 22.5, 23.6, 21.5, 23.2, 21.1],
        },
    ]
};
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

2.柱状图

option = {
	//图例
    legend: {
		x: 'center',
		y: 'bottom',
		padding: [10, 0, 3, 0],
		textStyle: {  //图例的字体样式
			color: '#fff',
		},
		data: ['类目A', '类目B']
	},
	//在容器中的位置
    grid: {
        left: '2%',
        right: '3%',
        bottom: '10%',
        top: '5%',
        containLabel: true
    },
    //悬浮卡片
    tooltip: {
        trigger: 'axis',  //坐标轴触发
        triggerOn: 'click', //点击显示卡片
        axisPointer: {
            type: 'none'
        },
        formatter: function () {
            return '奥里给'  //自定义悬浮卡片显示的数值
        }
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        //去掉最下面的头头
        axisTick: {
            show: false
        },
        //刻度相关配置：
        axisTick: {
            show: false,//去掉刻度
        },
        //轴线相关配置：
        axisLine: {
            show: false,  //去掉y轴的线
        },
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: function (value) {
                //保留一位小数并且加上单位
                return value + 'KG';
            }
        },
        //隐藏y轴的横线
        splitLine: {
            show: false
        },
        //设置y轴的初始值和结束值
        min: '10',
        max: '19',
        splitNumber: 9,  //设置y轴的间隔
        //刻度相关配置：
        axisTick: {
            show: false,//去掉刻度
            alignWithLabel: true, //刻度和值居中对齐
        },
        //轴线相关配置：
        axisLine: {
            show: false,  //去掉y轴的线
        },
    },
    series: [
        {
            name: '类目A',
            data: [12, 15, 15, 13, 17, 14, 13, 15, 13, 17, 14, 16],
            type: 'bar',
            barGap: '10%',  //设置柱子间隔
            itemStyle: {
                //设置渐变色
                opacity: 1, //透明度0隐藏，1显示
                barBorderRadius: [25, 25, 0, 0], //顶部的圆角弧度
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#73A2FF' }, //渐变上面
                    { offset: 1, color: '#11AFFA' } //渐变下面
                ])
            },
            showBackground: true,//是否展示背景并设置颜色
            backgroundStyle: {
                color: 'RGBA(255, 228, 218, 1)'
            }
        },
        {
            name: '类目B',
            data: [14, 17, 14, 13, 17, 14, 15, 17, 14, 13, 17, 12],
            type: 'bar',
            itemStyle: {
                opacity: 1,
                barBorderRadius: [25, 25, 0, 0],//顶部的圆角弧度
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#3FCF98' },
                    { offset: 1, color: '#10CEF0' }
                ])
            },
            showBackground: false,  //是否展示背景
        },
    ]
};
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

3.环形饼图显示百分比

option = {
  //第一个是底色，第二个是高亮色
  color:['rgb(78,253,149)','rgb(28,39,62)'], 
  series: [
    {
      name: '环形饼图',
      type: 'pie',
      radius: ['50%', '70%'],  //内圈占比,外圈占比
      hoverAnimation: false,//禁止鼠标悬停放大
      avoidLabelOverlap: true, //防止标签重叠
      //显示数值的样式
      label: {
          show: true,
          position: 'center', //位置
          formatter : function (data){
              // console.log(data)
              let a   =  data. name
              let b   =  data.percent.toFixed (0) + "%"
              let c   =   a + ':' + b
             // return a+':'+b
              return c  //去掉小数，加单位
          },
      },
      data: [
          {
            value: 95,  //第一个数值为余量的值
            selected:true,     //默认选中第一块
            label:{
                show:true,     //默认显示第一块
                fontSize: '40',
                fontWeight: 'bold',
                color: 'rgb(53,243,253)'
            }
          },
          {
            value: 5,//第二个数值为总量-余量的值，两个值加起来是总量
            label: {
              show:false
            }
          },  
      ]
    }
  ]
};
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

五、有其他问题去翻文档：echarts官网