×

echarts mui

修改echarts饼图的tooltip的提示文字,以及第一段提示线和第二段提示线长度

我的笔记 我的笔记 发表于2019-01-16 18:57:48 浏览3891 评论0

抢沙发发表评论

问题:

    如题,因为这次echarts饼图我需要放到app中,我们app用的mui框架,所以在mui整合echarts时,出现echarts的饼图显示过大。

解决办法:

    引入echarts.min.js,

    然后在页面写一个div,起个id

1、代码如下:注重看 option->tooltip->formatter:function

这个方法,就是自定义饼图的提示块。。

params是内置对象,它包括以下属性

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色
    color: string,

    // 饼图的百分比
    percent: number,}

我这里用了name和另一个数据进行对比,来筛选

2、修改提示线长度series->lableLine->normal里边的length和length2就是提示线长度,只需要修改它们即可。。

var dom = document.getElementById("ProjectTypePie");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
	tooltip : {
		confine : true,
		trigger: 'item',
		 formatter: function (params, ticket, callback) {
			var res="个数:"+params.value+"个("+params.percent+"%)<br/>金额:";
			for(var da1 of dataArr1){
				if(params.name==da1.name){
					res=res+da1.value+"元";
				}
			}
			return res;
		}
	},
	legend: {
		orient: 'vertical',
		left: 'left',
		data: titleArr
	},
	series : [
		{
			name: ' ',
			type: 'pie',
			radius : '45%',
			center: ['50%', '60%'],
			data:dataArr,
			labelLine:{
				normal:{
					length:3, 
					length2:3
				}  
			},
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				},
				normal:{
					label:{
						show: true, 
						formatter: '个数 :{c}个({d}%)'
					 }
				 } 
			}
		}
	]
};
;
if (option && typeof option === "object") {
	myChart.setOption(option, true);
}

    另外,tooltip里边的confine属性设置为true代表提示块只在外层div范围内显示

我的笔记博客版权我的笔记博客版权