折线图的基本实现

最新推荐文章于 2023-10-16 14:25:23 发布

生活热爱就好

最新推荐文章于 2023-10-16 14:25:23 发布

阅读量211

点赞数

分类专栏：数据可视化

本文链接：https://blog.csdn.net/qq_41891425/article/details/121193227

版权

ECharts 时间序列线图 x轴数据 y轴数据

关键词由CSDN通过智能技术生成

数据可视化专栏收录该内容

13 篇文章 1 订阅

订阅专栏

实现步骤

ECharts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option
x轴数据：
数据1：[‘1月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’]
y轴数据：
数据2：[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
图表类型：
在series下设置type:line
在这里插入图片描述
代码

 <!-- 
    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]
    4.将type的值设置为bar
     -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script src="lib/echarts.min.js"></script>
     
   
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <script>
        var mCharts= echarts.init(document.querySelector('div'))
        var xDataArr=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        var yDaraArr=[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
        var  option={
           
           xAxis:{
               type:'category'  ,//类目轴
               data:xDataArr
               
           },
           yAxis:{
               type:'value'  ,//数值轴
              
           },
           series:[
               {
                   name:'康师傅',
                   type:'line',   //bar是柱状图，line是线状，pie是饼状
                   data:yDaraArr
               }
           ]
        }
        //步骤5：将配置项设置给echarts实例对象  
        mCharts.setOption(option) 
     </script>

</body>
</html>