饼图自定义legend文字内容，以及饼图中间显示数量，中国地图制作

前端路上迷茫的小鲨鱼

已于 2023-08-10 15:41:35 修改

阅读量6.9k

点赞数 3

分类专栏： eCharts vue 文章标签： echarts javascript

于 2022-09-04 14:48:46 首次发布

本文链接：https://blog.csdn.net/Guoyu1_/article/details/126680088

版权

vue 同时被 2 个专栏收录

95 篇文章 0 订阅

订阅专栏

eCharts

14 篇文章 0 订阅

订阅专栏

echarts中升级到版本5以后，使用方法发生了改变，注意不兼容ie8了，还有引入方法改变了。

cnpm install echarts --save

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, GridComponent, CanvasRenderer]);

*一定要给饼图设置宽高！！！

<style lang="scss" scoped>
.picChart {
width: 800px;
height: 500px;
}
</style>

示例1：饼图自定义legend文字内容，以及饼图中间显示数量

<style lang="scss" scoped>
.picChart {
  width: 800px;
  height: 500px;
}
</style>

<template>
  <div ref="picChart" class="picChart" />
</template>

<script>
import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echart5/components'
import { PieChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'

export default {
  name: 'DocumentCancellation',
  data() {
    return {
      dataList: [
        { value: 382318, name: 'A类' },
        { value: 136470, name: 'B类' },
        { value: 208120, name: 'C类' }
      ]
    }
  },
  created() {
    echarts.use([
      TitleComponent,
      TooltipComponent,
      LegendComponent,
      PieChart,
      CanvasRenderer,
      LabelLayout
    ])
  },
  mounted() {
    this.loadChart()
  },
  methods: {
    loadChart() {
      const myChart = echarts.init(this.$refs['picChart'])
      const dataName = []
      let total = 0
      this.dataList.forEach(x => {
        dataName.push(x.name)
        total += parseFloat(x.value)
      })
      const option = {
        legend: {
          orient: 'vertical',
          right: '0',
          top: 'center',
          padding: [0, 20, 0, 20], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: [
            {
              name: 'A类'
            },
            {
              name: 'B类'
            },
            {
              name: 'C类'
            }
          ],
          formatter: (name) => {
            let total = 0
            let target
            const value = this.dataList.filter(x => x.name == name)[0].value
            for (let i = 0, l = this.dataList.length; i < l; i++) {
              total += this.dataList[i].value
              if (this.dataList[i].name == name) {
                target = this.dataList[i].value
              }
            }
            const arr = [
              '{name|' + name +
              '}{value|' + value +
              '}{percentage|' + ((target / total) * 100).toFixed(2) + '%}'
            ]
            return arr.join('\n')
          },
          textStyle: {
            rich: {
              name: {
                fontSize: 20,
                align: 'left',
                padding: [20, 0, 20, 20],
                lineHeight: 40,
                width: 100
              },
              value: {
                fontSize: 20,
                align: 'right',
                padding: [20, 0, 20, 20]
              },
              percentage: {
                fontSize: 20,
                align: 'right',
                padding: [20, 0, 20, 20]
              }
            }
          }
        },
        title: {
          zlevel: 0,
          text: [
            '{value|' + (total / 1000 > 1 ? (total / 1000).toFixed(2) + '万' : total) + '}',
            '{name|总数}'
          ].join('\n'),
          top: 'center',
          left: '25%',
          textAlign: 'center',
          textStyle: {
            rich: {
              value: {
                color: '#303133',
                fontSize: 40,
                fontWeight: 'bold',
                lineHeight: 50
              },
              name: {
                color: '#303133',
                fontSize: 18,
                lineHeight: 28
              }
            }
          }
        },
        color: [
          '#d40000',
          '#ff8a00',
          '#fcdb00',
          '#84ff00',
          '#00ffc0',
          '#1e00ff',
          '#ff00de',
          '#8400ff'
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        series: [
          {
            name: '订单数量',
            type: 'pie',
            center: ['25%', '50%'],
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 取消掉环形图鼠标移上去时自动放大
            itemStyle: { // 图形外文字上下显示
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20'
              }
            },
            labelLine: {
              show: false
            },
            data: this.dataList
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

示例2：柱状图

<div class="picChart" ref="barChart"></div>

import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, GridComponent } from 'echart5/components'
import { BarChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'


dataList: [
  { value: 40, name: 'A类' },
  { value: 41, name: 'B类' },
]


created() {
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    CanvasRenderer,
    LabelLayout
  ])
},
mounted() {
  let myChart = echarts.init(this.$refs['barChart'])
  let option = {
    color: ['#02a7f0'],
    xAxis: {
      type: 'category',
      data: ['A类', 'B类']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        barWidth: 30,
        data: this.dataList,
        type: 'bar'
      }
    ]
  }
  option && myChart.setOption(option)
}

示例3：柱状堆叠

 <div class="picChart" ref="picChart"></div>

import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echart5/components'
import { BarChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'

created() {
  echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer,
    LabelLayout
  ])
},
mounted() {
  let myChart = echarts.init(this.$refs['picChart'])
  let option = {
    legend: {
      icon: 'circle',
    },
    color: [
      '#236EFF',
      '#80E2FF',
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '实缴全额',
        stack: 'total',
        type: 'bar',
        barWidth: '20%',
        data: [4, 32, 100, 234, 290, 120, 120]
      },
      {
        name: '应缴全额',
        stack: 'total',
        type: 'bar',
        barWidth: '20%',
        data: [10, 52, 200, 334, 390, 330, 220]
      },
    ]
  }
  option && myChart.setOption(option)
}

示例4：折线

.picChart{
  height: 330px;
  width: 100%;
}
 
<div class="picChart" ref="picChart"></div>

import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echart5/components'
import { LineChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'

data() {
  return {
    dataList: [140, 232, 101, 264, 90, 340, 250]
  }
},
created() {
  echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    LabelLayout,
    GridComponent
  ])
},
mounted() {
  let myChart = echarts.init(this.$refs['picChart'])
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#4080FF'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '总投诉量',
        type: 'line',
        stack: 'Total',
        smooth: 0.6,
        symbol: 'none',
        lineStyle: {
          color: '#4080FF',
          width: 5
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(229,236,253,0.6)'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: this.dataList
      },

    ]
  }
  option && myChart.setOption(option)
}

示例5：地图

.chart {
    height: calc(724px - 55px);
    width: 100%
  }

<div class="chart">
  <div ref="chart" :style="{width: '100%', height: '100%'}"></div>
</div>



import * as echarts from 'echart5/core'
import china from '@/utils/china.json'
import { VisualMapComponent, GeoComponent, TooltipComponent, LegendComponent } from 'echart5/components'
import { MapChart, LinesChart, EffectScatterChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'


data() {
  return {
    airData: [
      { name: '北京', value: 1 },
      { name: '天津', value: 2 },
      { name: '河北', value: 5 },
      { name: '山西', value: 7 },
      { name: '内蒙古', value: 10 },
      { name: '辽宁', value: 12 },
      { name: '吉林', value: 15 },
      { name: '黑龙江', value: 18 },
      { name: '上海', value: 20 },
      { name: '江苏', value: 22 },
      { name: '浙江', value: 25 },
      { name: '安徽', value: 30 },
      { name: '福建', value: 34 },
      { name: '江西', value: 96 },
      { name: '山东', value: 92 },
      { name: '河南', value: 13 },
      { name: '湖北', value: 27 },
      { name: '湖南', value: 17 },
      { name: '广东', value: 38 },
      { name: '广西', value: 59 },
      { name: '海南', value: 54 },
      { name: '重庆', value: 66 },
      { name: '四川', value: 8 },
      { name: '贵州', value: 1 },
      { name: '云南', value: 25 },
      { name: '西藏', value: 24 },
      { name: '陕西', value: 25 },
      { name: '甘肃', value: 19 },
      { name: '青海', value: 17 },
      { name: '宁夏', value: 52 },
      { name: '新疆', value: 10 },
      { name: '台湾', value: 8 }
    ]
  }
},
created() {
  echarts.use([
    VisualMapComponent,
    TooltipComponent,
    GeoComponent,
    LegendComponent,
    MapChart,
    LinesChart,
    EffectScatterChart,
    CanvasRenderer,
    LabelLayout
  ])
},
mounted() {
  let myChart = echarts.init(this.$refs['chart'])
  const option = {
    // 提示浮窗样式
    tooltip: {
      show: true,
      padding: 0,
      borderWidth: 1,
      borderColor: '#fff',
      backgroundColor: '#fff',
      textStyle: {
        color: '#000000',
        fontSize: 12,
        decoration: 'none',
        overflow: 'break'
      },
      transitionDuration: 0,
      trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
      axisPointer: {// 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      alwaysShowContent: false,
      triggerOn: 'mousemove',
      enterable: true, //鼠标是否可进入提示框浮层中
      formatter: function(e) {
        let data = e.data
        if (data) {
          let context = `
             <div style="min-width: 180px;">
               <div style=" background: rgba(205,225,252,0.14);padding: 10px 19px;">
                 <p style="color: #666;font-size:14px;line-height: 30px;">
                    ${data.name}小区数
                    <span style="font-size: 24px;font-weight: bold;color: #FA5151;margin-left: 3px;"> ${data.value} </span>
                    个
                 </p>
               </div>
               <div style="margin: 7px 0 10px;padding: 0 19px;">
                <p style="color: #757575;font-size: 12px;line-height: 17px;">
                  房屋总数(个)：
                  <span style="font-size: 14px;color: #07B9B9;font-weight: bold;">3680</span>
                </p>
                <p style="color: #757575;font-size: 12px;line-height: 17px;">
                  房屋入住(个)：
                  <span style="font-size: 14px;color: #07B9B9;font-weight: bold;">3000</span>
                </p>
               </div>
             </div>
          `
          return context
        }

      }
    },
    //视觉映射组件(左下角)
    visualMap: { //分段型视觉映射组件
      show: false,
      type: 'piecewise',
      left: 50,
      bottom: 50,
      showLabel: true,
      // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
      calculable: false,
      // 拖拽时，是否实时更新
      realtime: true,
      align: 'left',
      itemWidth: 10,
      itemHeight: 10,
      inverse: true,
      min: 0,      //最小值
      max: 10,     //最大值
      seriesIndex: [0],
      color: ['red', 'skyblue'],    //最小值与最大值对应的颜色
      //各颜色代表的区域 lt:小于; lte:小于等于; gt:大于; gte:大于等于;
      pieces: [
        {
          lt: 30,
          label: '<1个',
          color: '#A1DBFF'
        },
        {
          gt: 30,
          label: '>1个',
          color: '#3AA1FF'
        }
      ]
    },
    // 地图配置
    geo: {
      //使用 registerMap 注册的地图名称
      map: 'china',
      // layoutCenter: ["50%", "50%"], //地图位置
      layoutSize: '100%',
      aspectScale: 0.6, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
      zoom: 1.25, //视觉比例大小,1.2即为原有大小的1.2倍
      //滚轮缩放的极限控制
      scaleLimit: {
        min: 1, //最小1倍
        max: 3 //最大3倍
      },
      roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。
      top: '15%',
      label: {
        // 图形上的文本标签
        normal: {
          show: true,
          textStyle: {
            color: '#fff'
          },
          fontSize: '8'
        },
        // 鼠标放上去的样式
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          borderColor: '#fff',
          areaColor: '#AFE0FF',
          borderWidth: 1
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: '#f98333',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10,
          borderWidth: 0,
          shadowColor: 'rgba(0, 93, 255, 0.2)'
        }
      },
      //右下角小地图
      regions: [{
        name: '南海诸岛',
        itemStyle: {
          normal: {
            areaColor: '#AFE0FF',
            borderColor: '#AFE0FF',
            borderWidth: 1,
            opacity: 1,
            label: {
              show: true,
              color: '#009cc9'
            }
          }
        },
        label: {
          show: true,
          color: '#fff',
          fontSize: 12
        }
      }]
    },
    series: [
      {
        selectedMode: false, //取消地图区域点击事件
        geoIndex: 0,  //将数据和第0个geo配置关联在一起
        type: 'map',
        roam: true,
        data: this.airData,
        label: {
          show: true
        }
      },
      //  选重点
      {
        type: 'effectScatter',     //系列为涟漪类
        coordinateSystem: 'geo',
        showEffectOn: 'render',  //涟漪特效的触发的方式 'render'直接显示  'emphasis'hover的时候显示
        symbolSize: 10,    //标记的大小
        rippleEffect: {    //涟漪的相关配置
          brushType: 'stroke',   //涟漪的类型 stroke填充 fill
          scale: 5,   //波纹的最大的缩放比例
          period: 4   //涟漪的扩散周期
        },
        label: {   //标签的配置
          normal: {
            formatter: '{b}',
            show: true,
            position: 'bottom',
            color: '#333',
            fontSize: 10,
            offset: [0, 10]   //文字偏移 [上，下]
          },
          textStyle: {
            color: '#757575'
          }
        },
        //每个点的配置
        itemStyle: {
          color: '#07B9B9'
        },

        data: [{
          name: '上海',
          value: [121.3359985, 31.1979007, 10]   //经纬度与值
        }, {
          name: '拉萨',
          value: [90.9169986, 29.29850075, 0]
        }]
      },
      {
        type: 'lines',
        coordinateSystem: 'geo'
      }
    ]
  }
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap('china', china)
  option && myChart.setOption(option)
  myChart.on('mouseover', function() { //取消鼠标移入地图区域高亮
    myChart.dispatchAction({
      type: 'legendUnSelect'
    })
  })
}

中国地图链接（去除了海南多余的地方的中国地图）
或访问此链接