echarts 折线图_数据量大_自动滚动加载_相关属性dataZoom_常用图表配置_数据可视化

Echarts 常用各类图表模板配置

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

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

---

---

一、折线图，数据量大，自动滚动，加载数据

const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const xAxisList = [];
const storeData = [];
const transmissionData = [];
const communicationFrequency = [];

function format(timestamp) {
  const date = new Date(timestamp);
  const Y = date.getFullYear() + '-';
  const M =
    (date.getMonth() + 1 < 10
      ? '0' + (date.getMonth() + 1)
      : date.getMonth() + 1) + '-';
  const D =
    (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';
  const h =
    (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  const m =
    (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
    ':';
  const s =
    date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
}

for (var i = 0; i < 7; i++) {
  xAxisList.push(format(new Date().getTime() - (7 - i) * 1000));
  storeData.push(Math.round(Math.random() * 60));
  transmissionData.push(Math.round(Math.random() * 60));
  communicationFrequency.push(Math.round(Math.random() * 60));
}

option = {
  backgroundColor: '#fff',
  legend: {
    icon: 'circle',
    top: '5%',
    right: '5%',
    itemWidth: 6,
    itemGap: 20,
    textStyle: {
      color: '#556677'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        show: true,
        backgroundColor: '#fff',
        color: '#556677',
        borderColor: 'rgba(0,0,0,0)',
        shadowColor: 'rgba(0,0,0,0)',
        shadowOffsetY: 0
      },
      lineStyle: {
        width: 1
      }
    },
    backgroundColor: '#fff',
    textStyle: {
      color: '#5c6c7c'
    },
    padding: [10, 10],
    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
  },
  grid: {
    top: '15%'
  },
  xAxis: [
    {
      type: 'category',
      data: xAxisList,
      axisLine: {
        lineStyle: {
          color: '#DCE2E8'
        }
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#556677'
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 15
      },
      axisPointer: {
        label: {
          padding: [-1, 0, 10, 0],
          margin: 15,
          // 移入时的字体大小
          fontSize: 18,
          backgroundColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#fff' // 0% 处的颜色
              },
              {
                // offset: 0.9,
                offset: 0.86,
                color: '#fff' // 0% 处的颜色
              },
              {
                offset: 0.86,
                color: '#33c0cd' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#33c0cd' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      boundaryGap: false
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: `数据量`,
      axisTick: {
        show: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#73DDFF'
        }
      },
      axisLabel: {
        color: '#73DDFF'
      },
      splitLine: {
        show: false
      }
    },
    {
      type: 'value',
      name: `次数`,
      position: 'right',
      axisTick: {
        show: true
      },
      axisLabel: {
        color: '#9E87FF',
        formatter: '{value}'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#9E87FF'
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '存储数据',
      type: 'line',
      data: storeData,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      symbolSize: 4,
      showSymbol: true,
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: '#9effff'
          },
          {
            offset: 1,
            color: '#9E87FF'
          }
        ]),
        shadowColor: 'rgba(158,135,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20
      },
      normal: {
        color: colorList[0],
        borderColor: colorList[0]
      },
      emphasis: {
        itemStyle: {
          color: '#ff0000',
          borderColor: '#ff0000',
          borderWidth: 6,
          shadowBlur: 12,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      },
      markLine: {
        silent: true,
        data: [
          {
            yAxis: 30
          }
        ]
      },
      markPoint: {
        symbolSize: 80,
        label: {
          show: true,
          align: 'center',
          color: 'white',
          fontWeight: 100,
          formatter: '{b}'
        },
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.4,
            y: 0.4,
            r: 0.9,
            colorStops: [
              {
                offset: 0,
                color: '#51e0a2'
              },
              {
                offset: 1,
                color: 'rgb(33,150,243)'
              }
            ],
            globalCoord: true
          },
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 10
        },
        data: [
          {
            name: '最大值',
            type: 'max'
          }
        ]
      }
    },
    {
      name: '传输数据',
      type: 'line',
      data: transmissionData,
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 8,
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: '#73DD39'
          },
          {
            offset: 1,
            color: '#73DDFF'
          }
        ]),
        shadowColor: 'rgba(115,221,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20
      },
      normal: {
        color: colorList[1],
        borderColor: colorList[1]
      }
    },
    {
      name: '通信频次',
      type: 'line',
      data: communicationFrequency,
      yAxisIndex: 1,
      symbol: 'circle',
      smooth: true,
      symbolSize: 10,
      showSymbol: true,
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#fe9a'
          },
          {
            offset: 1,
            color: '#fe9a8b'
          }
        ]),
        shadowColor: 'rgba(254,154,139, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20
      },
      normal: {
        color: colorList[2],
        borderColor: colorList[2]
      }
    }
  ]
};

function doing() {
  setInterval(() => {
    xAxisList.push(format(new Date().getTime()));
    storeData.push(Math.round(Math.random() * 60));
    transmissionData.push(Math.round(Math.random() * 60));
    communicationFrequency.push(Math.round(Math.random() * 60));
    option.xAxis[0].data = xAxisList;
    option.series[0].data = storeData;
    option.series[1].data = transmissionData;
    option.series[2].data = communicationFrequency;

    if (xAxisList.length > 6) {
      option.dataZoom = [
        {
          type: 'slider',
          show: false,
          rangeMode: 'value',
          startValue: xAxisList.length - 6,
          endValue: xAxisList.length
        },
        {
          type: 'inside',
          zoomLock: true
        }
      ];
    }

    myChart.setOption(option);
  }, 1000);
}
setTimeout(doing, 1000);

二、环形图

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

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

三、k 线图

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

四、折线图

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

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

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

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

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

五、阶梯折线图

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

六、横向柱状图

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

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

七、折线图 + 柱状图

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

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

八、3D 柱状图

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

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

九、工程项目可视化

echarts 工程项目可视化，依据x轴时间坐标轴，叠加展示不同阶段的项目节点，y轴展示项目阶段名、文字颜色，网格线，坐标轴两侧留白、背景色等；

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

十、雷达图

echarts 雷达图，自定义指示器名称，线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等；

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

十一、象形柱图

echarts 象形柱图，隐藏横纵坐标轴、网格线，坐标轴两侧留白，自定义矢量图，文字提示框、图形类型、背景色等；

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

十二、环形占比图

echarts 环形占比图，环形图、仪表盘、刻度线，自定义提示框、颜色渐变、背景色等；

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

十三、圆环动画

echarts 圆环动画，饼图、环形图、图表动画、网格线，颜色渐变，图行矢量，文字提示框、图表层级、背景色等；

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

十四、力向导图(二分图布局）

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

十五、地图

echarts 地图，自定义提示框；

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

十六、地图 json 免费下载

1. 全省份 json 下载：https://mp.csdn.net/mp_download/manage/download/UpDetailed?spm=3001.5299

2. 阿里数据可视化平台下载：http://datav.aliyun.com/portal/school/atlas/area_selector

3. https://geojson.cn/