echarts 柱状图_堆叠柱状图_数据分区_常用图表配置_数据可视化

Echarts 常用各类图表模板配置

注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项;

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


图标模板目录


一、数据分区显示

bash 复制代码
var areaStyle = {
  silent: false,
  itemStyle: {
    normal: {
      color: 'rgba(255, 0, 0, 0.01)'
    }
  },
  data: [
    [
      {
        name: '预警区域',
        xAxis: '山西',
        label: {
          normal: {
            offset: [500, 500],

            fontSize: 14
          }
        }
      },
      {
        xAxis: '黑龙江'
      }
    ]
  ]
};
var option = {
  backgroundColor: '#fff',
  color: ['#16c2af', '#ffc751', '#4162ff', '#ff6e72', '#9692ff'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '20%',
    bottom: '20%',
    left: '10%',
    right: '10%',
    containL0abel: true
  },
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#90979c'
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0
      },
      splitArea: {
        show: false
      }
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: [
        '甘肃',
        '青海',
        '内蒙古',
        '重庆',
        '山西',
        '辽宁',
        '吉林',
        '黑龙江'
      ],
      axisLine: {
        lineStyle: {
          color: '#90979c'
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: false
      },
      axisLabel: {
        interval: 0
      }
    }
  ],
  series: [
    {
      name: '一月',
      type: 'bar',
      stack: '总量',
      barWidth: '30px',
      data: [0, 212, 101, 0, 0, 0, 120, 0],
      markArea: areaStyle
    },
    {
      name: '二月',
      type: 'bar',
      stack: '总量',
      data: [0, 232, 251, 0, 0, 0, 10, 0],
      markArea: areaStyle
    },
    {
      name: '三月',
      type: 'bar',
      stack: '总量',
      data: [0, 232, 231, 134, 190, 0, 110, 0],
      markArea: areaStyle
    },
    {
      name: '四月',
      type: 'bar',
      stack: '总量',
      data: [0, 132, 101, 0, 0, 150, 210, 0],
      markArea: areaStyle
    },
    {
      name: '五月',
      type: 'bar',
      stack: '总量',
      data: [120, 252, 201, 134, 60, 0, 150, 0],
      markArea: areaStyle
    },
    {
      name: '六月',
      type: 'bar',
      stack: '总量',
      data: [120, 0, 0, 184, 70, 0, 0, 90],
      markArea: areaStyle
    },
    {
      name: '七月',
      type: 'bar',
      stack: '总量',
      data: [120, 0, 0, 174, 10, 230, 0, 0],
      markArea: areaStyle
    },
    {
      name: '八月',
      type: 'bar',
      stack: '总量',
      data: [220, 0, 0, 134, 70, 0, 0, 0],
      markArea: areaStyle
    },
    {
      name: '九月',
      type: 'bar',
      stack: '总量',
      data: [0, 0, 0, 0, 0, 0, 0, 90],
      markArea: areaStyle
    }
  ]
};

二、折线图数据分区

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

三、环形图

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

七、折线图,数据量大,自动滚动,加载数据

文章链接:https://blog.csdn.net/aibujin/article/details/140922448?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

  1. https://geojson.cn/