Echarts学习（二）折线图

最新推荐文章于 2022-01-13 15:25:00 发布

lh1234566

最新推荐文章于 2022-01-13 15:25:00 发布

阅读量202

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/lh1234566/article/details/111109652

版权

1.标记
markPoint：最大值、最小值
markLine：平均值
markArea：区间范围
2.线条控制
smooth：true 平滑的曲线
lineStyle：{} 线条风格（颜色、实虚线）
3.填充风格
areaStyle：{} 填充颜色
4.紧挨边缘
boundaryGap：false
5.缩放：脱离0值
scale：true
6.堆叠图
stack:‘all’

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    //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的值设置为line
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    var yDataArr2 = [2000, 2100, 100, 2000, 1800, 500, 1400, 1300, 900, 1000, 800, 600]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '康师傅',
          data: yDataArr,
          type: 'line' ,// 设置图表类型为 折线图
          smooth:true,
          lineStyle:{
            color:'green'
    },
          areaStyle:{
            color: 'green'
          }
        },
        {
          name: '统一',
          data: yDataArr2,
          type: 'line' ,// 设置图表类型为 折线图
          smooth:true,
          lineStyle:{
            color:'blue',
            opacity:1
          },
          areaStyle:{
            color: 'blue'
          }
        }
      ],
      legend:{
        data:['康师傅','统一'],
        top:20,
        icon:'roundRect',

      }

    }
    mCharts.setOption(option)
  </script>
</body>

</html>

lh1234566

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts学习（二）折线图

1.标记markPoint：最大值、最小值markLine：平均值markArea：区间范围2.线条控制smooth：true 平滑的曲线lineStyle：{} 线条风格（颜色、实虚线）3.填充风格areaStyle：{} 填充颜色4.紧挨边缘boundaryGap：false5.缩放：脱离0值scale：true6.堆叠图stack:‘all’<!DOCTYPE html><html lang="en"><head> &l
复制链接

扫一扫