我页面上的写法如下
首先引入需要的css和js文件
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/echarts.js" language="javascript" type="text/javascript"></script>
<script src="js/jquery.min.js" language="JavaScript" type="text/javascript"></script>
<script src="js/bootstrap.min.js" language="javascript" type="text/javascript"></script>
<script>
var myChart = echarts.init(document.getElementById("Lb"));
var option = {
/* title:{
text:"统计表",
}, */
grid: {
show:true,
left: "10%",
top: "10%",
right: "5%",
bottom: "10%"
},
tooltip:{
tigger:'axis',
axisPointer:{
type:'shadow'
}
},
/* legend:{
data:['AA','BB','CC','DD']
}, */
toolbox:{
show:'vertical',
x:'right',
y:'center',
/* feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true, type:['line','bar','stack','tiled']},
restore:{show:true},
saveAsImage:{show:true}
} */
},
calculable:true,
xAxis:[{
type:"category",
data:["迁入测试","省外测试","出生测试","死亡测试"]
}],
yAxis:[{
type:'value'
}],
series:[
{
// name:'AA',
type:'bar',
barWidth: 30,
data:[5,6,12,20],
itemStyle: {
normal: {
//这里是重点
color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
//给大于颜色数量的柱体添加循环颜色的判断
let lindex = params.dataIndex;
if (params.dataIndex >= colorList.length) {
lindex = params.dataIndex - colorList.length;
}
return colorList[lindex]
}
}
},
markLine:{
data:[
[
{
name:'两个坐标之间的标线',
coord:[10,10]
},
{
coord:[20,30]
}
],
]
}
},
]
};
myChart.setOption(option);
</script>
这样写完,谷歌上可以正常显示,但是IE8上不显示。
在网上查了半天,有的说要加meta标签,有的说使用的echart版本对不上。
后面当拖动浏览器窗口时,未被渲染的图表就会被渲染,
于是一查代码发现window.resize绑了一个用来做图表自适应的,mycharts.resize方法。
抱着试一试的态度测了一下这个方法,没想到真的解决了这个问题
下贴方法,不保证非饼图能用,仅做参考和记录
最终效果图如下所示: