echarts双y轴折线图的基本功能实现

Greatlifeee

已于 2023-04-03 14:16:50 修改

阅读量1.7k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2022-11-30 10:51:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43883951/article/details/128111129

版权

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文通过HTML和ECharts展示了如何创建一个双轴折线图，包括设置x轴和y轴数据，以及配置图表样式如平滑线条、标注点和标注线。示例中，左侧Y轴对应一组数据，右侧Y轴对应另一组数据，并且对超过一定值的数据进行特殊标注。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图展示:

在这里插入图片描述

HTML绘制

	<div style="width: 600px;height: 400px"></div>

option配置

	//1. ECharts最基本的代码结构
    //2. x轴数据:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    //3. y轴数据:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr1 = [9000, 8800,7900, 6000, 6800, 9700, 11400, 11300, 6900, 10000, 9800, 7600]
    var yDataArr2 = [300, 280, 1900, 1200, 600, 900, 1800, 2000, 2900, 500, 700, 900]
    var option = {
      title: {
        text: 'Temperature Change in the Coming Week'
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: [{
        name:'左侧Y轴名称',
        type: 'value'
      },{
        name:'右侧Y轴名称',
        type: 'value'
      }],
      series: [
        {
          yAxisIndex: 0,//使用哪条y轴
          data: yDataArr1,
          type: 'line', // 设置图表类型为 折线图
          smooth:true, // 设置图表平滑
          symbolSize:10, //图形大小
          label: { 
            show: true,//显示数值
            position: 'top', //数值位置
            fontSize:16, //数值字体大小
            formatter:function(params){ //显示某些特定数值
              if(params.value > 10000){ //例如显示大于1000的数值
                return params.value
              }else{
                return ''
              }
            }
          },
        },
        {
          yAxisIndex: 1,
          data: yDataArr2,
          type: 'line', // 设置图表类型为 折线图
          smooth:true, // 设置图表平滑
          symbolSize:10, //图形大小
          markPoint: { //标注点
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: { //标注线
            data: [{ type: 'average', name: 'Avg' }]
          }
        }
      ]
    }
    mCharts.setOption(option)