[JavaScript知识库]echarts之饼图

普通饼图

只是记录一下做项目时遇到的部分设置，真想搞明白，还是看文档

// 图形的div，需要设置样式给他一个宽高
<div class="table" ref="myChartsCapital"></div>


// 初始化饼图，主要是配置setOption里的值
let myChart = this.$echarts.init(this.$refs.myChartsCapital)
myChart.setOption({
	// 图表的主副标题的位置及文字样式设置
	title: {
		show: true,
        text: '饼图主标题',
        subtext: '饼图副标题',
        itemGap: 6, // 主副标题的间距
        left: 'center',
        textStyle: { // 主标题文本样式
      		color: "#fff",
      		fontStyle: "normal",
      		fontWeight: "normal",
      		fontFamily: "sans-serif",
      		fontSize: 18,
      		lineHeight: "30",
    	},
    	subtextStyle: {} // 副标题文本样式
    },
    
    graphic: [  //为环形图中间添加文字，title也能实现
        {
        type: "text",
        left: "center",
        top: "center",
        style: {
            text: "添加文本，还没看能不能设置不同的样式",
            textAlign: "center",
            fill: "#32373C",
            fontSize: 18,
        },
        },
    ],
    
    // 提示框组件
    tooltip: {
    	show:true,
        // 触发类型，item在无坐标轴的图表中使用，axis在有坐标轴的图表中使用
        trigger: 'item',
        triggerOn:"mousemove", // 触发条件，mousemove或click等
        textStyle: {},
        // 自定义提示框内容，默认是series里的name和data数据(必须有个name)
        formatter: (value) => {
        	return value.name + ''
        }
    },
    
    // 图例，这个有点麻烦
    legend: {
        orient: 'vertical', //图例方向，horizontal(默认横向)、vertical(垂直)
        data: data,
        icon: 'circle', // 图例形状，默认为方形,none为空，具体看文档
        itemGap: 10, // 图例之间的间隔
        itemWidth: 10, // 图例的长宽
        itemHeight: 10,
        left: 'center',
        padding: [5, 5, 5, 5],
        // 自定义图例文本内容，并换行
        formatter: (name) => {
        	let data = this.data;
            let value;
            let per
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                value = data[i].value;
                per = data[i].per
              }
            }
            let arr = [
              '{a|' + name + '}',
              '{b|' + value + '件}' + '{c|' + per + '%}' + '{d|' + ' ' + '}'
            ]
            return arr.join('\n')
        },
        // 自定义图例富文本样式
        textStyle: {
            rich: {
              a: {
                fontFamily: 'PingFang SC',
                fontSize: '0.1rem',
                fontWeight: 'Bold',
                color: '#333',
                align: 'left',
                padding: [28, 0, 0, 0],
              },
              b: {
                width: 200 // 文本宽度,使文本换行后能够对齐
              },
              c: {}
            }
        },
    },
    
    // 渲染数据
    series: [
    	{
    		name: '环形图', // 用于tooltip的显示，legend图例筛选
            type: 'pie',
            // radius: '50%', // 饼图
            radius: ['40%', '70%'], // 环形图
            // roseType: 'radius',  // 南丁格尔玫瑰图
            center: ['50%', '50%'], // 圆心位置
            selectedMode: 'single', // 点击后跟饼图分离，挺有意思的
            avoidLabelOverlap: false, // 是否启用防止标签重叠策略，默认开启
            data: this.data,
            itemStyle: {
                borderRadius: 10, // 实现圆角环形图
                borderColor: '#fff',
                borderWidth: 2
            },
            // 图像的文本标签
            label: {
            	show: false,
            	position: 'center' // outside(外侧)、inside(同inner，内部)
            },
            // 是否显示引导线
            labelLine: {
             	show: false
            },
            emphasis: {
            	// 环形图高亮部分文本，默认显示
                label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
    	},
    	// 写两个环形图，设置不同半径，可以实现同心圆效果
    	{...}
	]
})

// 图表初始化之后，加个监听实现图表自适应
window.addEventListener("resize", function () {
	myChart.resize();
});