图表不显示?
(1)是否正确引入echart。
(2)是否设置容器的宽度及高度。
echart初始化时动态设置图表高度及宽度,图表内容溢出容器?
这个问题研究了很久都没找到答案,最后很无耻的采用了resize()方法。。。
let width = ($("#chart2-continer").width()); //动态获取容器宽度
$("#chart2").css('width', width); //设置图表的宽度为容器的宽度
let myChart2 = echarts.init(document.getElementById("chart2")); //基于准备好的dom,初始化echarts实例
let option2 ={
...... //配置及数据
}
myChart2.setOption(option2);
myChart2.resize(); //修复初始化canvas超出图表容器bug
如何自定义图表的颜色?
在option的配置项里添加color属性,对应属相值为一个数组,默认值为['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']。
let option2 ={
color :['#1e87f0', '#32d296']
}
如何将纵坐标显示为百分比?
在option的配置项里添加yAxis属性
yAxis: [{
name: "覆盖率", //纵坐标的名字
axisLabel: {
formatter: '{value} %', //将数据显示为对应的百分比
},
axisLine: {
show: false //是否显示坐标轴轴线
},
axisTick: {
show: false //是否显示坐标轴刻度,通俗点说就是轴线旁边的小横线
},
}]
如何设置纵坐标的最大值及最小值(默认为自适应)
在option的配置项里添加yAxis属性
yAxis: [{
axisLabel: {
textStyle: {
color: '#666666',
fontSize: 12,
}
},
min:0, //纵坐标最小值
max:100, //纵坐标最大值
}],
如何自定义tooltip?
(1)使用字符串模板,参考官方文档
(2)使用回调函数
tooltip: {
trigger: 'item',
textStyle:{
align:'left'
},
formatter: function(params){
let res = '<p>'+ params.name+'</p><p>'+params.marker+params.seriesName + ':'+ params.value + '%' + ' '+ '总量:'+params.value+'</p>';
console.log(params);
return res;
}
}