配置了一个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