问题:
如题,因为这次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范围内显示