Vue中引入echarts的步骤及常见配置项

一、安装echarts

二、引入echarts

        1、全局引入

        2、局部引入

三、使用

一、安装echarts

npm i echarts

二、引入echarts

1.全局引入

在main.js文件中

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

二、局部引入

import * as echarts from "echarts";

三、在vue中使用echarts

1、准备一个容器放置，并且配置ref属性

<div ref="chart"></div>

2、将其封装成一个函数，并在初次挂载时调用

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

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

        }
    },
};
</script>

3、初始化（init函数），调节配置项

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

4、将配置项放入容器

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

四、常见配置项

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],
        },
    ]
};

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,  //是否展示背景
        },
    ]
};