数据可视化大屏如何引入和使用echarts

1.安装echarts

npm install echarts --save    

安装后在package.json中查看版本号，前面的尖尖符号是会自动进行版本更新的，无符号则会始终使用当前版本，未避免需要去维护版本升级带来的问题，可以不加尖尖

2.局部引用
在需要echars图的组件中进行引用echarts

import * as echarts from "echarts";
let myEcharts = echarts

3.创建图表（举例）

<div id="workEcharts" :style="{ width: '100%', height: '100%' }"></div>

const state = reactive({
    option:{ 
        title: {
            top: 5,
            left: "left",
            text: '单位：张',
            textStyle: {
                fontSize: 12,
                color: "#fff"
            },  
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
    legend: [{
        top: 5,
        // left: "center",
        right:160,
        itemGap: 5,
        itemWidth: 20,
        itemHeight: 5,
        icon: "rect",
        textStyle: {
          fontSize: 12,
          color: "#fff"
        },
        data: ['总次数']
    },{
        top: 5,
        // left: "right",
        right:100,
        itemGap: 5,
        itemWidth: 20,
        itemHeight: 5,
        icon: "rect",
        textStyle: {
          fontSize: 12,
          color: "#fff"
        },
        data: ['作业']
    },{
        top: 5,
        // left: "right",
        right:5,
        itemGap: 5,
        itemWidth: 20,
        itemHeight: 5,
        textStyle: {
          fontSize: 12,
          color: "#fff"
        },
        lineStyle:{type:'dashed',width:1,color:'#fff'},
        data: ['总次数']
    }],
    xAxis: [
        {
            type: 'category',
            data: ['08-20', '08-21', '08-22', '08-23', '08-24', '08-25', '08-26'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(100, 250, 255, 1)'
                }
            },
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(100, 250, 255, 1)'
                }
            },
            // name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(100, 250, 255, 1)'
                }
                // formatter: '{value} ml'
            }
        },
    ],
    series: [
        {
            name: '准确率',
            type: 'bar',
            tooltip: {
                valueFormatter: function (value) {
                    // + ' ml'
                    return value;
                }
            },
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],     
            itemStyle:{
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                    offset: 0, color: 'rgba(135, 249, 255, 1)' // 0% 处的颜色
                    }, {
                    offset: 1, color: 'rgba(57, 166, 231, 1)' // 100% 处的颜色
                    }],
                }
            }
        },
        {
            name: '作业',
            type: 'bar',
            tooltip: {
                valueFormatter: function (value) {
                    // + ' ml'
                    return value ;
                }
            },
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],      
            itemStyle:{
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                    offset: 0, color: 'rgba(255, 195, 123, 1)' // 0% 处的颜色
                    }, {
                    offset: 1, color: 'rgba(226, 82, 114, 1)' // 100% 处的颜色
                    }],
                }
            } 
        },
        {
            name: '总次数',
            type: 'line',
            lineStyle:{
                width: 1,
                type: 'dashed',
                color:'#fff'
            },
            symbolSize:5,
            itemStyle:{
                normal:{
                    color:'#fff',
                    borderColor:'#fff',  //拐点边框颜色
                }
            },
            // yAxisIndex: 1,
            tooltip: {
                valueFormatter: function (value) {
                    return value;
                }
            },
            data: [22.0, 22.2, 32.3, 42.5, 62.3, 102.2, 202.3, 232.4, 232.0, 162.5, 122.0, 62.2]
        }
    ]
    }
})
// 挂载时初始化图表
onMounted(() => {
    initChart();
});

// 卸载时销毁图表
onUnmounted(() => {
    // 销毁图表
    myEcharts.dispose;
});

const initChart=()=>{
    // 基于准备好的dom，初始化echarts实例
    let chart = myEcharts.init(document.getElementById("workEcharts"));
    //在state.option中设置图表的各个属性
    chart.setOption(state.option);
    // 大小自适应窗口大小变化
    window.onresize = function () {
        // 重置容器高宽
        chart.resize();
    };
}

4.如果需要修改图表中的样式和属性，可以进官网编辑和查看效果
官网地址