使用echarts仪表盘+柱形图+饼图实现数据可视化

最近公司有个需求,使用echarts仪表盘+柱形图+饼图实现数据可视化,现在功能已经完成,在此做个总结,记录这几天的开发成果。

第一模块:仪表盘

1、写好图表容器,设置宽高样式

#areaChart,#percentChart,#projectPerChart,#outerChart,#modeAreaChart{
   width: 100%;
} 
#areaChart{
   height: 260px;
   margin-bottom: 30px;
 }

2、仪表盘初始化以及图表配置项

initAreaChart () {
      var chartDom = document.getElementById('areaChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: { // 标题
          text: '在管项目数',
          x: 'center',
          textStyle: {  // 标题样式
            color: '#17D1FF',
            fontWeight: 500,
            fontSize: 14
          },
          textAlign: 'left'  // 标题居中
        },
        tooltip: {
          show: true
        },
        series: [
          {
            name: '在管项目数',
            type: 'gauge',  // 仪表盘类型
            detail: {
              fontSize: 16
            },
            data: [{value: this.total.projectCount, name: ''}],//仪表盘数据,接口返回          
            max: 5000,  // 仪表盘最大值
            radius: '90%',  // 仪表盘占比容器大小
            center: ['50%', '57%'],  // 仪表盘位置
            axisLine: { 
              lineStyle: {  // 仪表盘轴线颜色
                color: [[this.total.projectCount / 5000, '#2CDD79'], [1, '#D3D3D4']],
                width: 20 // 修改轴线宽度
              }
            },
            splitLine: {  // 仪表盘刻度长度
              length: 20
            },
            axisLabel: {  // 仪表盘刻度字体大小
              fontSize: 10
            }
          }
        ]
      }
      myChart.setOption(option)
    }

3、进入页面时调用,生成仪表盘

this.initAreaChart()

4、最后的渲染效果

使用echarts仪表盘+柱形图+饼图实现数据可视化_第1张图片

  第二模块:饼图

1、写好图表容器,设置宽高样式

2、饼图数据都是接口返回的,项目需求是饼图中的模块数量不确定,而前五种颜色要固定,不能随机,否则和整体设计风格不协调,以下是饼图图表配置项:

initPercentChart () {
      var chartDom = document.getElementById('percentChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          text: '各开发商在管总建面占比情况(百万㎡)',
          x: 'center',
          textStyle: {
            color: '#17D1FF',
            fontWeight: 500,
            fontSize: 14
          },
          textAlign: 'left'
        },
        tooltip: {  //格式化tooltip
          trigger: 'item',
          formatter: function (res) {
            return res.name + ':' + (res.value / 1000000).toFixed(2) + '(' + res.percent + '%)'
          }
          // formatter: '{b}: {(c/1000000).toFix(2)}百万 ({d}%)'
        },
        series: [
          {
            name: '开发商',
            type: 'pie',
            radius: ['30%', '60%'],  // 饼图大小
            center: ['46%', '50%'],  // 饼图位置
            avoidLabelOverlap: false,
            startAngle: 130, // 起始角度
            label: {
              show: true
            },
            labelLine: {  // 饼图文字指向线
              show: true
            },
            data: this.developer, // 饼图数据,后端返回
            itemStyle: {
              emphasis: {  // 鼠标移上去的效果
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                color: function (params) {  // 饼图各模块颜色,提前设置好6种,超出6中颜色随机
                  // 自定义颜色
                  var colorList = [
                    '#2CDD79', '#3D92FD', '#07F9F6', '#07C2F9', '#076AF9', '#FE8463'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }

3、调用生成图表

this.initPercentChart()

4、最后的渲染效果

使用echarts仪表盘+柱形图+饼图实现数据可视化_第2张图片

第三模块:柱形图

说明:柱形图数据有左右2个刻度,左边是面积,以百万为单位,右边是数量,最多只有几百;X轴的文字很多,要垂直显示;柱形颜色有渐变。以下是配置项代码:

initCompanyAreaChart () {
      var chartDom = document.getElementById('companyAreaChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          text: '平台公司在管项目数及在管总建面(百万㎡)',
          x: 'center',
          textStyle: {
            color: '#17D1FF',
            fontWeight: 500,
            fontSize: 14
          },
          textAlign: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: function (params) {  //tooltip格式化,由于有个颜色是渐变,所以要特殊处理 
            var result = params[0].name + '
' params[0].marker = '' params.forEach(function (item) { if (item.seriesName === '在管面积') { result += item.marker + ' ' + item.seriesName + ' : ' + (item.value / 1000000).toFixed(2) + '
' } else { result += item.marker + ' ' + item.seriesName + ' : ' + item.value + '
' } }) return result } }, toolbox: { show: false }, grid: { top: '18%', left: '0%', right: '0%', bottom: '0%', containLabel: true }, xAxis: [ { type: 'category', data: this.companyName, axisPointer: { type: 'shadow' }, axisLabel: { // 使X轴文字垂直显示 color: '#A3A4A8', formatter: function (value) { return value.split('').join('\n') } }, axisLine: { lineStyle: { color: '#0C3962' } }, axisTick: { lineStyle: { color: '#0C3962' } } } ], yAxis: [ { type: 'value', // 左边Y轴刻度 name: '', min: 0, // max: 200000, // interval: 40000, axisLabel: { // 修改Y轴刻度颜色和值的格式化 color: '#2B79DD', fontWeight: 'bold', formatter: function (res) { return (res / 1000000).toFixed(0) } }, axisLine: { lineStyle: { color: '#0C3962' } }, axisTick: { show: false, lineStyle: { color: '#0C3962' } }, splitLine: { show: true, lineStyle: { color: '#0C3962' } } }, { type: 'value', // 右边Y轴刻度 name: '', min: 0, // max: 500, // interval: 100, axisLabel: { color: '#3EB177', fontWeight: 'bold' }, axisLine: { lineStyle: { color: '#0C3962' } }, axisTick: { show: false, lineStyle: { color: '#0C3962' } }, splitLine: { show: true, lineStyle: { color: '#0C3962' } } } ], series: [ { name: '在管面积', type: 'bar', data: this.companyArea, itemStyle: { normal: { // 柱形颜色设置渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#2B89FF' }, { offset: 1, color: '#76C8FF' }]) } } }, { name: '在管项目数', type: 'bar', yAxisIndex: 1, data: this.companyCount, itemStyle: { normal: { color: '#01FFBF' } } } ] } myChart.setOption(option) }

最终效果:

使用echarts仪表盘+柱形图+饼图实现数据可视化_第3张图片使用echarts仪表盘+柱形图+饼图实现数据可视化_第4张图片

最后,结束语

整个功能整体效果呈现:

 使用echarts仪表盘+柱形图+饼图实现数据可视化_第5张图片

你可能感兴趣的