Echarts画折线图+柱状图[双y轴]（一看就会！！）

人间过客o>_<o

已于 2024-01-12 15:38:13 修改

阅读量3.5k

点赞数 14

文章标签： echarts 前端 javascript

于 2024-01-12 15:27:49 首次发布

本文链接：https://blog.csdn.net/weixin_64255870/article/details/135553891

版权

第一题：

<!--声明文档类型为HTML5-->
<!DOCTYPE html>
<!--声明这是一个HTML文档-->
<html>
<!--定义文档的头部信息-->
<head>
<!--  指定文档的字符编码为 UTF-8，以确保包含特殊字符的中文可以正确显示。-->
  <meta charset="utf-8">
<!--  定义文档的标题-->
  <title>模拟商店一周销售情况</title>
<!--  引入 ECharts 的 JavaScript 库文件。-->
  <script src="echarts.js"></script>
<!--  结束头部定义。-->
</head>

<!--定义文档的主体部分。-->
<body>
<!--在页面中创建一个宽800像素、高500像素的<div>元素，用于存放图表，并给它指定了一个ID“lyy”。-->
  <div id="lyy" style="width: 800px;height: 500px;"></div>

<!--初始化一个ECharts实例，指向上面创建的<div>元素。-->
  <script>
    var mylyy = echarts.init(document.getElementById("lyy"));
    
<!--    定义了一个名为option的对象，这个对象将包含创建图表所需的选项。-->
    var option = {
<!--    设置图表的标题-->
      title: {
        text: '模拟商店一周销售情况',
      },
<!--      配置工具提示框，设置触发类型为坐标轴触发。-->
      tooltip: {
        trigger: 'axis',
      },
<!--      设置图例-->
      legend: {
        data1: ['购买金额'],
        data2: ['销售金额']
      },
<!--      配置工具箱，提供数据视图、动态类型切换、重置图表、保存图片为图片等功能。-->
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['bar', 'line'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
<!--      设置图表是否支持拖拽和缩放。-->
      calculable: true,
      
<!--      配置X轴-->
      xAxis: [
        {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        }
      ],
<!--      配置Y轴-->
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '购买金额',
          type: 'bar',
          data: [200, 312, 431, 241, 175, 275, 369],
<!--          配置了标记点（markPoint），用于显示系列中的最大值和最小值。-->
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
<!--          这行配置了标记线（markLine），用于显示系列的平均值。-->
		  markLine: {
		    data: [{ type: 'average', name: 'Avg' }]
		  }
        },
        {
          name: '销售金额',
          type: 'line',
          data: [321, 432, 543, 376, 286, 298, 400],
          markPoint: {
			  data: [
			    { type: 'max', name: 'Max' },
			    { type: 'min', name: 'Min' }
			  ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        }
      ]
    };

    mylyy.setOption(option);
  </script>
</body>

</html>

这段代码是一个HTML页面，其中集成了使用ECharts库创建的图表。ECharts 是一个使用 JavaScript 实现的开源可视化库，主要用于数据的可视化展示。

运行结果：

第二题：双y轴

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>国内生产总值及增速</title>
 <script src="echarts.js"></script>
</head>

<body>
 <div id="lyy" style="width: 800px;height: 500px;"></div>
 <script>
  var mylyy = echarts.init(document.getElementById("lyy"));
  var option = {
   title: {
    text: '国内生产总值及增速',
    left:'center',
   },
   tooltip: {
    trigger: 'axis',
   },
   legend: {
    data1: ['购买金额'],
    data2: ['销售金额'],
    bottom:"0%"
   },

   xAxis: [
    {
     data: ['2013年', '2014年', '2015年', '2016年', '2017年'],
    }
   ],
<!--   这部分定义了两个Y轴。第一个Y轴的名称是“国内生产总值（万亿）”。第二个Y轴的名称是“国内生产总增长率（%）”。两个轴的标签格式化函数都是简单的数值输出。-->
   yAxis: [
    {
     name:'国内生产总值（万亿）',
     min: 40,
     max: 90,
     interval: 10,
     axisLabel: {
      formatter: '{value}'
     }
    },
    {
     name:'国内生产总增长率（%）',
     min: 6,
     max: 8,
     interval: 0.4,
     axisLabel: {
      formatter: '{value}'
     }
    }
   ],
   series: [
    {
     name: '国内生产总值（万亿）',
     type: 'bar',
     emphasis: {
      focus: 'series'
     },
     label:{
     show:true,
     position:'top',
    },
     data: [59,65,68,73,82]
    },
    {
     name: '国内生产总增长率（%）',
     type: 'line',
      smooth: true,
      yAxisIndex: 1,
      data: [7.8,7.4,7.0,6.6,6.9],
      label:{
     show:true
    }
    },
   ]
  };

  mylyy.setOption(option);
 </script>
</body>

</html>

上面代码中的

series: [
    {
      name: '国内生产总值（万亿）',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        position: 'top'
      },
      data: [59, 65, 68, 73, 82]
    },
    {
      name: '国内生产总增长率（%）',
      type: 'line',
      smooth: true,
      yAxisIndex: 1, // 指定使用第二个Y轴
      data: [7.8, 7.4, 7.0, 6.6, 6.9],
      label: {
        show: true
      }
    },
  ]
};

        这部分定义了两个系列。第一个系列的名称也是“国内生产总值（万亿）”，图表类型是柱状图（bar）。它有强调配置，当系列被聚焦时，会突出显示。标签配置为显示，并且位置在顶部。数据为[59, 65, 68, 73, 82]，表示一周内每天的国内生产总值。
        第二个系列的名称是“国内生产总增长率（%）”，图表类型是折线图（line），并且配置了平滑属性（smooth）。它使用第二个Y轴（通过yAxisIndex: 1指定）。数据为[7.8, 7.4, 7.0, 6.6, 6.9]，表示一周内每天的国内生产总增长率。标签配置为显示。
        整个配置对象为ECharts图表提供了两个Y轴和两个系列的数据，可以用来创建一个包含柱状图和折线图的复合图表。

运行结果：