栏目二：Echart绘制动态折线图+柱状图

盼兮*

于 2024-09-28 22:46:23 发布

阅读量626

点赞数 12

分类专栏： echarts可视化图形文章标签：信息可视化

本文链接：https://blog.csdn.net/m0_70405779/article/details/142618492

版权

echarts可视化图形专栏收录该内容

2 篇文章 0 订阅

订阅专栏

栏目二：Echart绘制动态折线图+柱状图

配置了一个ECharts图表，该图表集成了数据区域缩放、双Y轴显示及多种图表类型（折线图、柱状图、象形柱图）。图表通过X轴数据展示，支持平滑折线展示比率数据并自动添加百分比标识，柱状图以渐变色展示评论数量，而象形柱图则以矩形形式展示点赞数量，增强了视觉表现力。整体设计注重细节处理，如坐标轴指示器、数据点形状及标签格式化等，旨在为用户提供直观、丰富的数据可视化体验。

效果图：
在这里插入图片描述
核心代码：

let option = {  
    // 配置提示框组件  
    tooltip: {  
        trigger: 'axis', // 触发类型：坐标轴触发  
        axisPointer: {  
            type: 'shadow', // 坐标轴指示器类型为阴影  
            label: {  
                show: true, // 显示坐标轴指示器的标签  
                backgroundColor: '#333' // 标签的背景色  
            }  
        },  
        // 这里有一个被注释掉的 formatter 配置，用于自定义提示框内容  
        // ...（formatter 配置被省略）  
    },  
    // 配置数据区域缩放组件  
    dataZoom: {  
        type: 'inside', // 缩放组件类型：内置在坐标系中  
        start: 0, // 初始时，数据窗口的起始百分比  
        end: 95 // 初始时，数据窗口的结束百分比  
    },  
    // 配置 X 轴  
    xAxis: {  
        data: x, // X 轴数据  
        axisLine: {  
            lineStyle: {  
                color: "#ccc" // X 轴线的颜色  
            }  
        },  
        show: true // 显示 X 轴  
    },  
    // 配置 Y 轴，这里配置了两个 Y 轴  
    yAxis: [{  
        splitLine: { show: false }, // 不显示分割线  
        axisLine: {  
            lineStyle: {  
                color: "#ccc" // Y 轴线的颜色  
            }  
        },  
        name: "赞评数量" // Y 轴名称  
    }, {  
        // 第二个 Y 轴的配置  
        splitLine: { show: false },  
        axisLine: {  
            lineStyle: {  
                color: "#ccc"  
            }  
        },  
        name: "比率/%", // Y 轴名称  
        axisLabel: {  
            formatter: '{value} %' // Y 轴标签格式化，添加百分比符号  
        }  
    }],  
    // 配置多个系列  
    series: [{  
        name: '比率',  
        type: 'line', // 类型为折线图  
        smooth: true, // 线条平滑  
        showAllSymbol: true, // 显示所有数据点  
        symbol: 'emptyCircle', // 数据点形状  
        symbolSize: 15, // 数据点大小  
        yAxisIndex: 1, // 使用第二个 Y 轴  
        data: y3, // 数据  
        // 为该系列的 tooltip 自定义显示  
        tooltip: {  
            valueFormatter: function (value) {  
                return value + '%'; // 为 tooltip 值添加百分比符号  
            }  
        }  
    }, {  
        name: '评论',  
        type: 'bar', // 类型为柱状图  
        barWidth: 30, // 柱状图的宽度  
        itemStyle: {  
            normal: {  
                barBorderRadius: 5, // 柱子的圆角  
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
                    // 渐变色配置  
                    { offset: 0, color: '#a85d74' },  
                    { offset: 1, color: '#8f5d6c' }  
                ])  
            }  
        },  
        data: y2 // 数据  
    }, {  
        name: '点赞',  
        type: 'pictorialBar', // 类型为象形柱图  
        symbol: 'rect', // 形状为矩形  
        itemStyle: {  
            normal: {  
                color: '#279418' // 颜色  
            }  
        },  
        symbolRepeat: true, // 是否重复显示形状  
        symbolSize: [30, 4], // 形状大小  
        symbolMargin: 1, // 形状间的间隔  
        z: -10, // 系列的堆叠顺序  
        data: y1 // 数据  
    }]  
};

具体代码如下：

<!-- 第二章：折线图+柱状图+动画 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
<script src="../js/echarts.min.js"></script>
<script>
    let x = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    let y2 = [586, 548, 456, 845, 345, 234, 584, 734, 645, 456, 567, 678];
    let y3 = [0.5753, 0.2768, 0.7575, 0.6445, 0.3534, 0.4435, 0.6435, 0.3587, 0.4845, 0.6135, 0.4748, 0.6575];
    let y1 = y2.map(function (item, index) {
        return Math.round(item / y3[index]);
    });
    y3 = y3.map(function (item) {
        // 保留两位小数
        return parseFloat((item * 100).toFixed(2));
    });
    
    function changeData(list) {
        let tmp = list[0]
        for (let i = 0; i < list.length-1; i++) {
            list[i] = list[i+1];
        }
        list[list.length - 1] = tmp;
    }
    
    function circleCharts(x,y1,y2,y3) {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        let option = {  
		    // 配置提示框组件  
		    tooltip: {  
		        trigger: 'axis', // 触发类型：坐标轴触发  
		        axisPointer: {  
		            type: 'shadow', // 坐标轴指示器类型为阴影  
		            label: {  
		                show: true, // 显示坐标轴指示器的标签  
		                backgroundColor: '#333' // 标签的背景色  
		            }  
		        },  
		        // 这里有一个被注释掉的 formatter 配置，用于自定义提示框内容  
		        // ...（formatter 配置被省略）  
		    },  
		    // 配置数据区域缩放组件  
		    dataZoom: {  
		        type: 'inside', // 缩放组件类型：内置在坐标系中  
		        start: 0, // 初始时，数据窗口的起始百分比  
		        end: 95 // 初始时，数据窗口的结束百分比  
		    },  
		    // 配置 X 轴  
		    xAxis: {  
		        data: x, // X 轴数据  
		        axisLine: {  
		            lineStyle: {  
		                color: "#ccc" // X 轴线的颜色  
		            }  
		        },  
		        show: true // 显示 X 轴  
		    },  
		    // 配置 Y 轴，这里配置了两个 Y 轴  
		    yAxis: [{  
		        splitLine: { show: false }, // 不显示分割线  
		        axisLine: {  
		            lineStyle: {  
		                color: "#ccc" // Y 轴线的颜色  
		            }  
		        },  
		        name: "赞评数量" // Y 轴名称  
		    }, {  
		        // 第二个 Y 轴的配置  
		        splitLine: { show: false },  
		        axisLine: {  
		            lineStyle: {  
		                color: "#ccc"  
		            }  
		        },  
		        name: "比率/%", // Y 轴名称  
		        axisLabel: {  
		            formatter: '{value} %' // Y 轴标签格式化，添加百分比符号  
		        }  
		    }],  
		    // 配置多个系列  
		    series: [{  
		        name: '比率',  
		        type: 'line', // 类型为折线图  
		        smooth: true, // 线条平滑  
		        showAllSymbol: true, // 显示所有数据点  
		        symbol: 'emptyCircle', // 数据点形状  
		        symbolSize: 15, // 数据点大小  
		        yAxisIndex: 1, // 使用第二个 Y 轴  
		        data: y3, // 数据  
		        // 为该系列的 tooltip 自定义显示  
		        tooltip: {  
		            valueFormatter: function (value) {  
		                return value + '%'; // 为 tooltip 值添加百分比符号  
		            }  
		        }  
		    }, {  
		        name: '评论',  
		        type: 'bar', // 类型为柱状图  
		        barWidth: 30, // 柱状图的宽度  
		        itemStyle: {  
		            normal: {  
		                barBorderRadius: 5, // 柱子的圆角  
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
		                    // 渐变色配置  
		                    { offset: 0, color: '#a85d74' },  
		                    { offset: 1, color: '#8f5d6c' }  
		                ])  
		            }  
		        },  
		        data: y2 // 数据  
		    }, {  
		        name: '点赞',  
		        type: 'pictorialBar', // 类型为象形柱图  
		        symbol: 'rect', // 形状为矩形  
		        itemStyle: {  
		            normal: {  
		                color: '#279418' // 颜色  
		            }  
		        },  
		        symbolRepeat: true, // 是否重复显示形状  
		        symbolSize: [30, 4], // 形状大小  
		        symbolMargin: 1, // 形状间的间隔  
		        z: -10, // 系列的堆叠顺序  
		        data: y1 // 数据  
		    }]  
		};
        option && myChart.setOption(option);
    }
    
    setInterval(function () {
        circleCharts(x,y1,y2,y3);
        changeData(y2);
        changeData(y3);
        changeData(y1);
        changeData(x);
    }, 1500);
</script>

</html>