echarts 阶梯折线图_自定义_常用图表配置_数据可视化

Echarts 常用各类图表模板配置

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

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

---

---

一、阶梯折线图

option = {
  backgroundColor: '#09102D',
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#19224D',
    padding: 15,
    axisPointer: {
      type: 'none'
    }
  },
  grid: {
    left: '8%',
    right: '8%',
    bottom: '20%',
    top: '20%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#7B818E'
    }
  },
  yAxis: {
    color: '#7B818E',
    splitLine: {
      show: true,
      lineStyle: {
        color: '#383E56',
        width: 1
      }
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      color: '#7B818E'
    }
  },
  series: [
    {
      name: '1号线',
      data: [10, 15, 20, 10, 15, 15, 15],
      type: 'line',
      step: 'start',
      showAllSymbol: true,
      symbol: 'circle',
      symbolSize: 12,
      itemStyle: {
        color: '#FFFA58',
        borderColor: '#fff',
        borderWidth: 3,
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2
      }
    },
    {
      name: '2号线',
      data: [30, 35, 30, 30, 30, 30, 30],
      type: 'line',
      step: 'start',
      showAllSymbol: true,
      symbol: 'circle',
      symbolSize: 12,
      itemStyle: {
        color: '#F85CC1',
        borderColor: '#fff',
        borderWidth: 3,
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2
      }
    },
    {
      name: '3号线',
      data: [20, 25, 25, 25, 20, 20, 25],
      type: 'line',
      step: 'start',
      showAllSymbol: true,
      symbol: 'circle',
      symbolSize: 12,
      itemStyle: {
        color: '#7E42FF',
        borderColor: '#fff',
        borderWidth: 3,
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2
      }
    }
  ]
};

二、环形图

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

五、横向柱状图

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/