echarts 饼图样式及内圈

Koreyoshi·

于 2023-12-18 11:49:48 发布

阅读量173

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/135059154

版权

在这里插入图片描述

组件引用：import pieChartIndustry from “./components/pieChartIndustry”;

  <pieChartIndustry :opt="industryRate" />
  
  data() {
	  return {
		  industryRate: {
		        legend: ['水电', '水利', '新能源', '建筑', '市政', '交通', '水务', '其他'],
		        seriesData: [{
		          name: '水电',
		          value: 37.5,
		        }, {
		          name: '水利',
		          value: 37.5,
		        }, {
		          name: '新能源',
		          value: 37.5,
		        }, {
		          name: '建筑',
		          value: 37.5,
		        }, {
		          name: '市政',
		          value: 37.5,
		        }, {
		          name: '交通',
		          value: 37.5,
		        }, {
		          name: '水务',
		          value: 37.5,
		        }, {
		          name: '其他',
		          value: 37.5,
		        }]
		      },
	      }
  }

子组件pieChartIndustry.vue:

ChartPanel组件已经封装过了，前面的文章有封装

<template>
  <div style="width: 100%;height: 100%;">
    <ChartPanel ref="chart" :option="options" :style="opt.yAxisName ? 'height:calc(100% - 16px)' : ''"></ChartPanel>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import ChartPanel from '@/components/ChartPanel';
export default {
  components: {
    ChartPanel
  },
  props: {
    opt: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      options: null
    }
  },
  watch: {
    opt: {
      deep: true,
      immediate: true,
      handler(val) {
        // if (val && val.seriesData) {
          this.getOpt(val)
        // }
      }
    }
  },
  methods: {
    getOpt(val) {
      let {
        seriesData,
        legend
      } = val
      // let color = ["#B0C8FF", "#3562D4", "#62B8F7", "#2BC4CD", "#FFCFAD", "#E68B29", "#FCC0C0", "#D43538"]
      let color = ["#B0C8FF", "#3666E0", "#62B8F7", "#26D7E0", "#FFCFAD", "#F0922E", "#FCC0C0", "#E03D3F"]
      this.options = {
        tooltip: {
          borderWidth: 0,
          show: true,
          formatter: params => {
            if (params.name != '内边线') {
              return `
                      <div>${params.name}
                        <span style="color:${params.color};font-weight:700">${params.percent}%</span>  
                      </div>
              `
            }
          }
        },
        series: [{
          type: "pie",
          center: ["50%", "50%"],
          radius: ["40%", "53%"],
          color: color,
          hoverAnimation: false,
          // startAngle: 135,
          label: {
            normal: {
              formatter: data => {
                return data.name + ' {per' + data.dataIndex + '|' + data.percent + '%} '
              },
              backgroundColor: "rgba(255, 147, 38, 0)",
              borderColor: "transparent",
              borderRadius: 4,
              rich: {
                b: {
                  color: "#595D64",
                  fontSize: 14,
                  lineHeight: 33
                },
                per0: {
                  color: color[0],
                  fontSize: 14,
                  borderRadius: 2
                },
                per1: {
                  color: color[1],
                  fontSize: 14,
                  borderRadius: 2
                },
                per2: {
                  color: color[2],
                  fontSize: 14,
                  borderRadius: 2
                },
                per3: {
                  color: color[3],
                  fontSize: 14,
                  borderRadius: 2
                },
                per4: {
                  color: color[4],
                  fontSize: 14,
                  borderRadius: 2
                },
                per5: {
                  color: color[5],
                  fontSize: 14,
                  borderRadius: 2
                },
                per6: {
                  color: color[6],
                  fontSize: 14,
                  borderRadius: 2
                },
                per7: {
                  color: color[7],
                  fontSize: 14,
                  borderRadius: 2
                },
              },
              textStyle: {
                color: "#595D64",
                fontSize: 14
              }
            }
          },
          data: seriesData,
        }, {
          type: "pie",
          center: ["50%", "50%"],
          radius: ["35%", "36%"],
          label: {
            show: false
          },
          hoverAnimation: false,
          data: [{
            name: '内边线',
            value: 1,
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  type: "linear",
                  global: false,
                  colorStops: [{
                    offset: 0,
                    color: color[0]
                  }, {
                    offset: 0.15,
                    color: color[1]
                  }, {
                    offset: 0.3,
                    color: color[2]
                  }, {
                    offset: 0.45,
                    color: color[3]
                  }, {
                    offset: 0.6,
                    color: color[4]
                  }, {
                    offset: 0.75,
                    color: color[5]
                  }, {
                    offset: 0.9,
                    color: color[6]
                  }, {
                    offset: 1,
                    color: color[7]
                  }]
                }
              }
            },
          }]
        }]
      }
      this.$nextTick(() => {
        this.$refs.chart.initChart(echarts, chart => {
          // chart.setOption(this.options)
          this.options && chart.setOption(this.options, true);
        });
      })
    }
  }
}
</script>