echarts常见图形-饼状图(四)

1.最终效果图

2.echarts文件(jylxfx.js)

export const jylxfxOption = sData => {
  //   let sData = [
  //     {
  //       name: "种植业",
  //       value: 456
  //     },
  //     {
  //       name: "养殖业",
  //       value: 231
  //     },
  //     {
  //       name: "畜牧业",
  //       value: 231
  //     },
  //     {
  //       name: "渔业",
  //       value: 134
  //     },
  //     {
  //       name: "种养结合",
  //       value: 421
  //     },
  //     {
  //       name: "林业",
  //       value: 123
  //     },
  //     {
  //       name: "其他",
  //       value: 532
  //     }
  //   ];
  let legendData = [];
  sData.map(item => {
    legendData.push(item.name);
  });
  let option = {
    textStyle: {
      fontFamily: "BebasNeue"
    },
    color: ["#2970ff", "#774dff", "#ffc000", "#00ddff", "#71f974", "#ffe79a", "#00ddff"],
    grid: {
      left: "center",
      top: "top"
    },
    tooltip: {
      show: false,
      trigger: "item",
      formatter: "{b}<br/> {c}  ({d}%)"
    },
    legend: {
      type: "scroll", //分页类型
      orient: "vertical",
      left: "65%",
      top: "middle",
      textStyle: {
        color: "#59C9F9"
        // fontSize: 25
      },
      icon: "roundRect",
      itemWidth: 8,
      itemHeight: 10,
      data: legendData
    },
    series: [
      // 主要展示层的
      {
        radius: ["40", "48"],
        center: ["35%", "50%"],
        type: "pie",
        avoidLabelOverlap: false,
        // hoverAnimation: false,
        label: {
          position: "center",
          // formatter: "{b}：{d}%",
          show: false,
          formatter(params) {
            // return "{value|" + params.value + "} \n{name|" + params.data.name + "}";//展示具体值
            return "{value|" + params.percent + "}%\n{name|" + params.data.name + "}"; //展示百分比
          },
          rich: {
            name: {
              color: "#7DA7C0",
              fontSize: 10
            },
            value: {
              fontSize: 18,
              padding: [0, 5, 0, 0],
              fontWeight: "bold",
              lineHeight: 30
            }
          }
        },
        hoverOffset: 2,
        // selectedOffset: 2,
        itemStyle: {
          borderWidth: 2,
          borderColor: "#10243C"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold"
          },
          itemStyle: {
            // color: "red",
            // borderColor: "black",
            // borderWidth: 15
          }
        },
        labelLine: {
          normal: {
            show: true,
            length: 30,
            length2: 55
          },
          emphasis: {
            show: true
          }
        },
        data: sData
      },
      {
        name: "外边框",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ["35%", "50%"],
        radius: ["52", "52"],
        label: {
          normal: {
            show: false
          }
        },
        tooltip: {
          show: false
        },
        data: [
          {
            value: 1,
            name: "",
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: "#0b5263"
              }
            }
          }
        ]
      }
    ]
  };
  return option;
};

3.vue文件中

3.1 html

<div style="width:30vh;height:30vh;" ref="jylxfxChart"></div>

3.2 js逻辑处理(引入jylxfx.js)

<script>
	import { ndfxOption } from "@/assets/js/xxjyzt/ndfx"; //年度分析
	export default {
		data(){},
		methods: {
			// 经营类型分析
		    jylxfx() {
		      let jylxfxChartEle = this.$echarts.init(this.$refs.jylxfxChart);
		      let sData = [
		        {
		          name: "种植业",
		          value: 456
		        },
		        {
		          name: "养殖业",
		          value: 231
		        },
		        {
		          name: "畜牧业",
		          value: 231
		        },
		        {
		          name: "渔业",
		          value: 134
		        },
		        {
		          name: "种养结合",
		          value: 421
		        },
		        {
		          name: "林业",
		          value: 123
		        },
		        {
		          name: "其他",
		          value: 532
		        }
		      ];
		      jylxfxChartEle.dispose();
		      jylxfxChartEle = this.$echarts.init(this.$refs.jylxfxChart);
		      jylxfxChartEle.setOption(jylxfxOption(sData));
		      tools.loopShowTooltip(jylxfxChartEle, jylxfxOption(sData), {
		        loopSeries: false,
		        seriesIndex: 0
		      });
		    },
			// 初始化图形
    		initEcharts() {
				let jylxfxChartEle = this.$echarts.init(this.$refs.jylxfxChart); //经营类型分析
				window.addEventListener("resize", function() {
			        jylxfxChartEle.resize(); //经营类型分析
			    });
			}
		},
		mounted() {
			this.jylxfx(); //经营类型分析
			this.initEcharts();
		}
	}
</script>