需要注意echarts版本不同,部分属性可能有所不同,我用的是echarts4.0.
一、echarts图表自适应问题。
自适应代码
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=1366){
docEl.style.fontSize = 100 * (clientWidth / 1366) + 'px';
}else{
docEl.style.fontSize = 100+"px"
}
};
if (!doc.addEventListener) return;
recalc();
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
使用自适应rem 来画echarts图表。发现刚开始加载,canvas 的宽高始终是rem未实现之前元素的宽高,打断点发现是加载顺序原因(加上document.ready后发现部分还是有问题),换算rem之前就获取了元素宽高,导致图表很小,才发现自适应代码只有在浏览器窗口大小发生变化和dom结构加载完成后才会执行函数换算,所以没发生之前就先调用recalc();
二、echarts图表的循环问题
使用vue开发,其中需要用到图表的循环,问题来了,echarts都是通过不同的id来初始化图表的,而我用到了v-for ,一次循环中的两个不同的图表index相同,只能通过
动态设置id来实现了,但是id没赋值之前echarts就初始化了,导致拿到的id 为undefined,所以写了个定时器延迟调用,显然此法并不好,但想不到更好的了,上代码;
<li v-for="item in trastMsg">
<div :id="item.sign"></div>
<div :id="item.radarsign"></div>
</li>
for(var i = 0;i<self.trastMsg.length;i++){
self.trastMsg[i].sign = 'echart'+i;
self.trastMsg[i].radarsign = 'echart'+10+i;
}
var timer = setInterval(quw,20);
var t = 0;
function quw(){
for(var i = 0;i<self.trastMsg.length;i++){
if(document.getElementById(self.trastMsg[i].sign)==null){
t=1;
}
}
if(t!=1){
for(var i = 0;i<self.trastMsg.length;i++){
function barQuest(){
let myChart = echarts.init(document.getElementById(self.trastMsg[i].sign));
}
}
clearInterval(timer);清除定时器
}
}
三、柱图
1、柱图数据条最大最小值标注不同于其他数据的颜色(js仅仅考虑到只有一个最大、最小值的情况)
var maxindex = value.indexOf(Math.max.apply(Math, value));
var minindex = value.indexOf(Math.min.apply(Math, value));
option中
series:[{
itemStyle:{
normal: {
show: true,
color:function(params) {
var colorList = [];
for(var i = 0;i<name.length;i++){
colorList.push('#5CB5D6')
}
colorList[maxindex]='#EB6100';
colorList[minindex]='#22AC38';
return colorList[params.dataIndex]
}
}
}]
2、柱图数据标签仅显示最大最小值,其他值鼠标悬浮上去显示
显然label这并不能像color 一样返回数组,需要在data属性上下功夫,所以data里面就不能简单存值,而是存在data["value":];
例:"data":[{"name":"张三","value":622}]
for(var i=0;i<data.length;i++){
data[i].label={show:false,position:'top'};
data[i].emphasis={label:{show:true,position:'top'}}
}
var maxindex = value.indexOf(Math.max.apply(Math, value));
var minindex = value.indexOf(Math.min.apply(Math, valuenull));
data[maxindex].label= {show:true,position:'top'};
data[minindex].label= {show:true,position:'top'};
四、雷达图‘
1、图例问题
vue-cli 构建的项目,雷达图就是没有图例,相同代码放到html就可以,后来才发现是没引用legend;
切记vue-cli中的title\legend等需要引入,’require('echarts/lib/component/legend');
除此之外,图例的图形在data的icon中设置了rect,原以为是正方形了结果,结果是矩形,也没错啦,所以还需要设置
color:["#5CB5D6","#32B16C","#EB6877","#F8B551"], 图例颜色
legend: {
right:0,
top:'2%',
orient: 'vertical',图例方向
data: [{name:'1',icon:'rect},{name:'2',icon:'rect'}],图例形状
itemWidth:12,图例宽
itemHeight:12,图例高
textStyle:{
color:'#707070'
}
},
另外数据的线颜色已经在data中设置,但图例颜色却不一致,在legend中也没法设置,只能在legend同级color中把图例颜色设置;
2、雷达图数据标签显示
series: [{
type: 'radar',
symbolSize:0,
label:{
show:true,
color:'#000000',
position:'top'
},
label就是显示不出来,纳闷,后来才发现只要 symbolSize:0,就显示不出来,所以要不不加,要不改为 symbolSize:1,解决