有些图表 echart 官网并没有提供示例, 需要早自己手动设计. 对 js 和 echart 掌握不是特别熟练的朋友不是很友好今天我就提供一个常用的饼图示例, 这个饼图的 title 写到了饼图的中间会根据鼠标指向的部分来改变中间的显示

代码直接复制到润乾里就可以

    <div id='${id}' style="width:${width}px;height:${height}px"></div>
    
    <script type="text/javascript">
	var dom = document.getElementById('${id}');
	var myChart = echarts.init(dom);
	var app = {};

app.title = '项目总览';

var data0=[];
var legendata = ${legend};
var valuedata = ${value};
var countq = ${arg1}
for(var i=0;i<legendata.length;i++){
	var name = legendata[i];
	var value = valuedata[i];
	var tmp = {};
	tmp.value = value;
	tmp.name=name;
	data0.push(tmp);
}

 
option = {
	color:['#6699FF','#99FF99','#00FFFF'],
	title: {
        zlevel: 0,
        text: [
            '{value|项目总数}\n'+countq,
        ].join('\n'),
        rich: {
            value: {
                color: '#303133',
                fontSize: 20,
                fontWeight: 'bold',
                lineHeight: 40,
            },
            name: {
                color: '#909399',
                lineHeight: 20
            },
        },
        top: 'center',
        left: '130',
        textAlign: 'center',
        textStyle: {
            rich: {
                value: {
                    color: '#303133',
                    fontSize: 20,
                    fontWeight: 'bold',
                    lineHeight: 40,
                },
            },
        },
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
 
    series: [
        {
            name:'项目总数',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            zlevel: 1,
 		    label: {
			padding: [20, 20, 20, 20],
			backgroundColor: '#FFFFFF',
                show:false,
                formatter:'{b}\n{c}',
                position: 'center',
                lineHeight:30,
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:data0
        }
    ]
};




 if (option && typeof option === "object") {
    var startTime = +new Date();
    myChart.setOption(option, true);
    var endTime = +new Date();
    var updateTime = endTime - startTime;
    console.log("Time used:", updateTime);
}   
</script>