【Echarts】详解折线图/面积图！！！快来看看吧！！

最新推荐文章于 2024-01-06 17:31:46 发布

Milk595

最新推荐文章于 2024-01-06 17:31:46 发布

阅读量6.8k

点赞数 7

分类专栏： ECharts 文章标签：数据可视化可视化 Echarts 折线图/面积图

本文链接：https://blog.csdn.net/weixin_43352901/article/details/108489921

版权

ECharts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

折线图/面积图的实现

先看效果

在这里插入图片描述

文件目录

在这里插入图片描述

获取Echarts

在这里插入图片描述

引入Echarts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>

绘制图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器

<body style="background: black;">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 835px; height: 670px"></div>
</body>

然后就可以通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个折线图/面积图

 <script type="text/javascript">
   // 基于准备好的dom, 初始化echarts实例
   var myChart = echarts.init(document.getElementById('main'));
   // 使用刚指定的配置项和数据显示图表
   myChart.setOption(option)
 </script>

代码步骤拆分

var option = {} // 指定图标的配置和数据

数据源

 // 数据集
var dataList = [
  {date: '08/01', value: 16},
  {date: '08/02', value: 56},
  {date: '08/03', value: 46},
  {date: '08/04', value: 11},
  {date: '08/05', value: 116},
  {date: '08/06', value: 146},
  {date: '08/07', value: 116},
  {date: '08/08', value: 56},
  {date: '08/09', value: 36},
  {date: '08/10', value: 129},
  {date: '08/11', value: 145},
  {date: '08/12', value: 115},
  {date: '08/13', value: 105},
  {date: '08/14', value: 45},
  {date: '08/15', value: 87},
  {date: '08/16', value: 82},
  {date: '08/17', value: 24},
  {date: '08/18', value: 78},
  {date: '08/19', value: 56},
  {date: '08/20', value: 52},
  {date: '08/21', value: 78},
  {date: '08/26', value: 123},
  {date: '08/31', value: 130}
]

var xKeys = dataList.map((item) => item.date);
var values = dataList.map((item) => item.value);

title

title: {
  text: '球队近30日盈利情况',
  show: true,
  textStyle: {
    color: '#fff',
    fontSize: '36',
    fontFamily: 'Microsoft YaHei',
    fontWeight: 400
  },
  top: '42',
  left: '40'
}

在这里插入图片描述

legend (配合series才会显示)

legend: {
  top: 150,
  right: 0,
  z: 4,
  textStyle: {
    fontSize: "24px",
    fontFamily:
      "Microsoft YaHei",
    fontWeight: 400,
    color: "#c2cbf2",
  },
}

在这里插入图片描述

grid

grid: {
  left: 70,
  top: 200,
  right: 40,
  bottom: 80
}

在这里插入图片描述

xAxis（直角坐标系 grid 中的 x 轴）

xAxis: [
  {
    type: 'category',
    data: xKeys,
    color:'#323e52',
    axisLabel: {
      margin: 20,
      interval: 'auto',
      textStyle: {
        fontSize: 24,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 400,
        textAlign: 'center',
        color: '#c2cbf2'
      }
    },
    position: 'bottom',
    axisLine: {
      lineStyle: {
        color: '#b7ccff',
        type: 'solid'
      }
    },
    splitLine: {
      show: false
    }
  }
]

在这里插入图片描述

yAxis（直角坐标系 grid 中的 y 轴）

yAxis: {
  type: 'value',
  silent: true,
  interval: 30,
  min: 0,
  max: 150,
  axisLabel: {
    textStyle: {
      fontSize: 24,
      fontFamily: 'Microsoft YaHei',
      fontWeight: 400,
      textAlign: 'right',
      color: '#c2cbf2'
    }
  },
  axisLine: {
    show: false
  },
  axisTick: {
    show: false
  },
  splitLine: {
    show: true,
    lineStyle: {
      color: '#232842',
      type: 'solid'
    }
  }
}

在这里插入图片描述

series（系列列表。每个系列通过 type 决定自己的图表类型）

series: [
  {
    name: '盈利资金(万)',
    type: 'line', // 折现/面积图
    data: values,
    itemStyle: {
      color: '#24def3'
    },
    symbol: 'emptyCircle', // 几何圆
    symbolSize: 10,
    areaStyle: { // 区域填充样式
      color: { // 填充的颜色 // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#25eaff', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#121f35' // 100% 处的颜色
          }
        ],
        global: false, // 缺省为 false
      }
    },
    xAxisIndex: 0 
  }
]

在这里插入图片描述

修改部分问题（bug）

示例: 问题一

grid: {
          left: 'auto',
          top: 346, 
          right: 'auto',
          containLabel:true,
          bottom: 20,
        },
        
//grid这样写，左右都写成auto，还要加containLabel，不然就有可能挡住y轴的标签

在这里插入图片描述

示例: 问题二

yAxis里面的max不能写死，不然最大值永远不会变，比如max=100，实际的值超过是200，那就会挡住

在这里插入图片描述

相信看了这篇文章，你应该会构建折线图/面积图，觉得有用的话就给小编点个赞呗！！！

Milk595

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
【Echarts】详解折线图/面积图！！！快来看看吧！！

折线图/面积图的实现先看效果文件目录获取Echarts引入Echarts<!DOCTYPE html><html><head> <meta charset="utf-8">  <script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>&l
复制链接

扫一扫