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

栏目二: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) {
   
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值