Echarts填坑记录
最近项目有个月报分析，里边用到了柱状图，堆叠图，环形图，饼图，折线图这几种基本图表。
自己封装的chart组件：
问题
1）图表第一次渲染是没问题的。当切换筛选条件第二次渲染的时候，会把第一次的数据合并。
解决办法：应该设置mychart.setoption({},true);
原因：chart.setOption(option,notMerge,lazyUpdate);
option:图表的配置项和数据
notMerge:可选，是否不跟之前设置的option进行合并，默认为false，即合并。（这里是导致二次渲染不成功的根本）
lazyUpdate:可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。
2）一个cavans里有多个图表，比如环形图和柱状堆叠图。
tooltip对于柱状堆叠图和环形图的用法不一样。所以要在柱状堆叠图的grid里再设置一遍。
并且实现堆叠图hover当前鼠标所在位置数值。
tooltip: {
trigger: 'item' （饼图）/'axis'（grid坐标轴）,
axisPointer: {
type: "cross",
label: {
show: false,
formatter: function (params) {
if (params.seriesData.length === 0) {
// 鼠标对应的y轴数据
window.mouseCurValue = params.value;
}
}
}
},
formatter: function (params) {
//堆叠图
if (Array.isArray(params)) {
let res = "", sum = 0, sub = 0, arr = [], brr = [];
params.forEach(i => {
if (i.data > 0) {
arr.push(i);
} else {
brr.push(i);
}
});
if(window.mouseCurValue > 0) {
for (let i = 0; i < arr.length; i++) {
let series = arr[i];
series.seriesName = series.seriesName.indexOf('other') > -1 ? 'others' : series.seriesName;
sum += Number(series.data);
if (sum >= window.mouseCurValue) {
res = series.axisValue + "
" + series.marker + series.seriesName + ": " + format.commafy(series.data) + "
"; break; } } } else { for (let i = 0; i < brr.length; i++) { let series = brr[i]; series.seriesName = series.seriesName.indexOf('other') > -1 ? 'others' : series.seriesName; sub += Number(series.data); if (sub <= window.mouseCurValue) { res = series.axisValue + "
" + series.marker + series.seriesName + ": " + format.commafy(series.data) + "
"; break; } } } return res; } else { let name = params.name.indexOf('other') > -1 ? 'others' : params.name; return name + ": " + utils.millionMoney(params.value); } } } 3）label 字体样式是否折行，折行样式 label: { normal: { formatter: function (p) { let str = '{a|' + p.data.costName + '}{abg|}\n{hr|}\n{c|'+ p.name + '：' + p.value + ' }{per|' + p.percent + '%}'; return str; }, rich: { a: { fontSize: 10, lineHeight: 17, color: '#999', align: 'center' }, hr: { width: '100%', height: 0 }, c: { fontSize: 10, lineHeight: 17, color: '#333', align: 'left' }, per: { fontSize: 10, borderRadius: 2, color: 'white', align: 'left', padding: [1, 4, 2, 4], backgroundColor: '#727272', borderRadius: 2 } } } },
" + series.marker + series.seriesName + ": " + format.commafy(series.data) + "
"; break; } } } else { for (let i = 0; i < brr.length; i++) { let series = brr[i]; series.seriesName = series.seriesName.indexOf('other') > -1 ? 'others' : series.seriesName; sub += Number(series.data); if (sub <= window.mouseCurValue) { res = series.axisValue + "
" + series.marker + series.seriesName + ": " + format.commafy(series.data) + "
"; break; } } } return res; } else { let name = params.name.indexOf('other') > -1 ? 'others' : params.name; return name + ": " + utils.millionMoney(params.value); } } } 3）label 字体样式是否折行，折行样式 label: { normal: { formatter: function (p) { let str = '{a|' + p.data.costName + '}{abg|}\n{hr|}\n{c|'+ p.name + '：' + p.value + ' }{per|' + p.percent + '%}'; return str; }, rich: { a: { fontSize: 10, lineHeight: 17, color: '#999', align: 'center' }, hr: { width: '100%', height: 0 }, c: { fontSize: 10, lineHeight: 17, color: '#333', align: 'left' }, per: { fontSize: 10, borderRadius: 2, color: 'white', align: 'left', padding: [1, 4, 2, 4], backgroundColor: '#727272', borderRadius: 2 } } } },
发表评论 (审核通过后显示评论)：