Echarts简单图表

时间:2023-03-10 00:57:02
Echarts简单图表

一、实现要点

  常用可视化图表库

    Echarts
    HighCharts
    D3.js
    neo4j (NOSQL)

1.导入js库
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/bar.js"></script>
2.定义div
<div id="show" style="height:600px;width:800px"></div>
一定要设置高度 height
3.给数据赋值
option.xAxis.data = data.x;
option.series[0].data=data.y;
4.设置option
myChart.setOption(option)

二、数据处理

1.series添加数据
1.1按相应的格式添加数据
diySeries.push({
data : data.y1,
type : 'bar'
}) 1.2数组数据------循环添加,
for(i in inn){
var name = inn[i].split(",")[0];
var value = inn[i].split(",")[1];
innerData.push({
name : name ,
value : value
})
}