关于前端:echarts动态折线堆积图

成果如下：

这里用的是echarts的折线图重叠
本文要探讨的内容：
1、折线重叠款式
2、动静更改数据
3、图表挂载

1、折线重叠款式

const lineChart = () => {
let option = {
    color : ['#00f2f1','#ed3f35'],  /* 调色盘 */
    /* 题目的款式 */
    title: {
        text: '单位：万',  /* 右上角题目 */
        textStyle : {   /* 题目的款式 */
            fontSize : '12px',
            color : '#61a8ff',
            fontStyle : 'normal',
            fontWeight : 'normal'
        },
        left:'40px',  // 题目地位
    },
    /* 鼠标移入的悬浮框配置 */
    tooltip: {
        trigger: 'axis',
        backgroundColor : 'rgba(0,0,0,0.4)', /* 背景色 */
        borderColor: 'transparent',  // 边框色
        textStyle: {   // 文字色彩
                color : 'rgba(255,255,255,0.8)'
        },
        axisPointer:{       //坐标轴指示器
            type:'cross',   //十字准星指示器
            // x轴的线条
            crossStyle: {
                color: "rgba(76, 155, 253)",  //线的色彩
                width: 1,  // 宽度
                type: "dashed",  // 虚线
            },
            // y轴的线条
            lineStyle:{
                color : 'rgba(76, 155, 253)'
            },
            // x和y轴指向的数据提醒款式
            label : {
                show : true,
                color : '#fff',  // 文字色彩
                backgroundColor : '#4c9bfd'  // 背景色彩
            }
       }
    },
    /* 分类阐明 */
    legend: {
        data: ['预期销售额', '理论销售额'],  /* 顶部分类 */
        textStyle:{
            color : '#4c9bfd'   // 右上角字体色彩
        },
        lineStyle : {
            color : 'inherit' /* 题目分类数据的的色彩-依据调色盘的款式主动遍历抉择 */
        },
    },
    grid: {
        left: '4%',  // 定位
        right: '4%',
        bottom: '0%',
        height : 'auto', // 高度自适应
        top : '30px',  // 间隔顶部
        show : true,  // 展现并容许批改款式
        containLabel: true,  // 包含刻度文字在内
        borderColor: '#096b80'  /* 边框的色彩 */
    },
    /* 工具栏配置 */
    toolbox: {
        /* 保留按钮 */
        feature: {
            saveAsImage: {  /* 保留为图片 */
                iconStyle : {  /* icon图标的款式 */
                borderColor: '#61a8ff'
                },
                bottom : '10px'  // 地位
            }
        },
        top:'-5px',  // 工具栏地位
        right:'10px'  // 工具栏地位
    },
    /* x y 轴的文字款式 */
    textStyle:{
            color: '#4c9bfd'
    },
    // 轴下方指向的色彩
    axisTick: {
            lineStyle : { color : '#096b80' }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false, //去除轴内间距
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']  // x轴下方的月份数据
    },
    yAxis: {
        type: 'value',
        splitLine : {  // y轴折线图分割线配置
            show : true,
            lineStyle : {
                color : '#096b80'
            }
        },
    },
    series: [
        /* 折线图-折线的配置 */
        {
        name: '预期销售额',  // 对应legend分类
        type: 'line',  // 类型为线条
        data: expect,
        // 平滑折线                                
        smooth: false,
        // symbol:'none',  // 去掉连接点
        },
        {
        name: '理论销售额', // 对应legend分类
        type: 'line', // 类型为线条
        data: practical,
        // 平滑折线                                
        smooth: false,
        }
    ]
    };
    myChart.setOption(option);
}

2、动静更改数据

咱们只须要去操作series绑定的数据即可

    series: [
        /* 折线图-折线的配置 */
        {
        name: '预期销售额',  // 对应legend分类
        type: 'line',  // 类型为线条
        data: expect,
        // 平滑折线                                
        smooth: false,
        // symbol:'none',  // 去掉连接点
        },
        {
        name: '理论销售额', // 对应legend分类
        type: 'line', // 类型为线条
        data: practical,
        // 平滑折线                                
        smooth: false,
        }
    ]

咱们能够模仿一个随机数，调用该函数随机生成数据并替换掉series原有的数据，这样就能够实现动态数据。

/* 随机生成并重置数据 */
const randomInfo = (num) => {
    expect.length = 0;
    practical.length = 0;
    stackedInfo.forEach(el=>{
        el.expect = (Math.random() * num).toFixed(0);
        el.practical = (Math.random() * num).toFixed(0);
        expect.push(el.expect)
        practical.push(el.practical)
    })
    lineChart(); // 从新设置图表
};

咱们更改了echarts的数据源，页面视图并不会发生变化，因为图表没有从新设置，仅仅数据变了，echarts没有从新设置是没有用的，所以咱们须要封装设置图表的办法，数据变动后调用办法从新设置图表。

3、图表挂载

vue3能够应用setup，因为setup代替了beforeCreate和created申明周期，所以这个阶段是无奈初始化echarts的，因为dom此时还获取不到，咱们能够将数据写在组合API下面，理论初始化echarts在onMounted中即可。

const expect = reactive([]); // 预期销售数据
const practical = reactive([]); // 理论销售数据
const stacked = ref();  // dom
let myChart = null;  // echarts

onMounted(()=>{
    myChart = echarts.init(stacked.value);  // 初始化echarts
    lineChart(); 
})

最初附上官网配置项文档：https://echarts.apache.org/examples/zh/editor.html?c=line-stack

如果感觉这篇文章对你有帮忙，欢送点赞👍、珍藏💖、转发✨哦~