echarts 折线图

Echarts 常用各类图表模板配置

注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；

以下代码都可以复制到 Echarts 官网，直接预览；

一、折线图

option = { 
      color: ['#32E5FF'], tooltip: { 
      trigger: 'axis' }, grid: { 
      top: '30%', left: '10%', right: '10%', bottom: '20%', containLabel: true }, xAxis: { 
      type: 'category', data: [ '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11' ], axisLine: { 
      show: true, lineStyle: { 
      color: 'rgba(20, 35, 87, 1)' } }, boundaryGap: true, // 坐标两侧是否留白 axisTick: { 
      show: false // 是否显示刻度线 } }, yAxis: [ { 
      type: 'value', axisLabel: { 
      color: '#FF44AA', // y 轴文字颜色 formatter: '{value} °C' }, axisLine: { 
      show: true, lineStyle: { 
      color: '#E6E6FA' // y 轴轴线颜色 } }, splitLine: { 
      lineStyle: { 
      color: '#FFDEAD', //grid 区域中的分隔线颜色 width: 1, type: 'solid' } } }, { 
      type: 'value', name: '(摄氏度)', position: 'left', alignTicks: true, nameGap: 8, axisLine: { 
      show: false // 是否显示 y 轴轴线 }, axisLabel: { 
      formatter: '{value}' }, nameTextStyle: { 
      padding: [0, 10, 8, 0] // 单位位置 } } ], series: [ { 
      type: 'line', name: '折线图', data: ['74', '99', '84', '75', '86', '74', '53'], label: { 
      show: true, position: 'top', formatter: '{c} °C', color: '#00DDAA', fontSize: '10px', fontFamily: 'ArialMT' }, itemStyle: { 
      color: '#FFE4E1', // 数据颜色 gradientColorNum: 1 }, areaStyle: { 
      color: { 
      x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { 
      offset: 0.1, color: 'rgba(6, 252, 254, 0.1) ' // 0% 处的颜色 }, { 
      offset: 0.5, color: 'rgba(6, 252, 254, 0.5)' // 0% 处的颜色 }, { 
      offset: 0.7, color: 'rgba(6, 252, 254, 0.3)' // 0% 处的颜色 }, { 
      offset: 0.9, color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色 } ] } } } ] }; 

二、环形图

echarts 环形图：多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；

文章链接 ：https://blog.csdn.net/aibujin/article/details/?spm=1001.2014.3001.5501

三、k 线图

文章链接 ：https://blog.csdn.net/aibujin/article/details/?spm=1001.2014.3001.5501

四、横向柱状图

echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；

文章链接： https://blog.csdn.net/aibujin/article/details/?spm=1001.2014.3001.5501

五、折线图 + 柱状图

echarts 折线图 + 柱状图，左右两侧y轴线，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/?spm=1001.2014.3001.5501

六、3D 柱状图

echarts 3D 柱状图，多个柱状图叠加，y轴内刻度线、隐藏横坐标，文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/?spm=1001.2014.3001.5501