echart折线图

小小1992

已于 2023-08-15 17:41:20 修改

阅读量112

点赞数

文章标签： javascript 前端开发语言

于 2023-08-15 17:11:16 首次发布

本文链接：https://blog.csdn.net/u014645827/article/details/132303095

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div class="con">
           <div id="main" style="width:100%;height:800px;"></div>
       </div>

           option = {
               xAxis: {
                   type: 'category',
                   boundaryGap: false,
                   axisLabel: {
                       show: true,
                       color: "#808080",
                   },
                   axisLine: {
                       show: true,
                       color: "#808080",
                       lineStyle: {
                           color: "#e5e5e5"
                       }
                   },
                   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
               },
               yAxis: {
                   type: 'value',
                   axisLabel: {
                       show: true,
                       color: "#808080",
                   },
                   splitLine: {
                       show: false,
                       color: "#808080",
                       lineStyle: {
                           color: "#999"
                       }
                   },
                   axisLine: {
                       show: true,
                       lineStyle: {
                           color: "#e5e5e5"
                       }
                   },
                   axisTick: {
                       show: true
                   }

               },
               series: [{
                   data: [820, 932, 901, 934, 1290, 1330, 1320],
                   type: 'line',
                   symbol: 'circle',
                   symbolSize: 4, //折线点的大小
                   itemStyle: {
                       normal: {
                           color: "#006FFF", //折线点的颜色
                           lineStyle: {
                               color: "#006FFF" //折线的颜色
                           }
                       },
                   },
                   areaStyle: {

                       color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                               offset: 1,
                               color: "#C4D6F8",

                           },
                           {
                               offset: 0,
                               color: "#F0F3F8",
                           },
                       ])
                   },

}]
};

           option && myChart.setOption(option);
       </script>
   </body>
</html>