总结一下关于echarts使用的一些东西。echarts很强大,一般情况下我们参照官方网站的文档就可以解决,但是有些还是需要记录一下。如何使用echarts呢,大概步骤如下:
1 引入echarts的包。我这里引用的是比较早的文件:
2 准备要显示图标的容器,我这里使用的是div
1
|
<
div
id
=
"hart1"
style
=
"width:90%;height:400px;"
></
div
>
|
3 准备数据。这一步准备好你将要显示的数据,数据的格式应该使用echarts要求的格式,例如:
1
|
[
'value1'
,
'value2'
,
'value3'
,
'value4'
,
'value5'
]
|
4 绑定数据并显示。绑定数据的时候如果数据源的格式不是echarts要求的格式必须进行转换。例如数据源是这样的:
1
|
"value1"
,
"value2"
,
"value3"
,
"value4"
|
但是绑定到echarts的data就是不显示,可以使用如下方法解决:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
series : [
{
name:
'测试数据'
,
type:tblx,
data:(
function
(){
var
res = [];
for
(
var
i=0;i<dataDysl.length;i++){
res.push(dataDysl[i]);
}
return
res;
})(),
itemStyle : {
normal : {
color :
'#00B0F0'
}
}
}
]
|
本文转自 乌英达姆 51CTO博客,原文链接:http://blog.51cto.com/7156680/1791963