前一段时间公司做了舆情相关的软件，舆情用到了大量的图表，相当大的数据交互。当时没有整理下来，昨天有一次用到这些东西，所以准备记录下来，方便以后使用。
百度echart算是百度针对数据展示做的一个图表插件吧，一般我们使用都不是问题，主要还是对于对动态数据的解析。我这里使用饼状图，和柱状图为例：
首先，我们需要定义一个绘图的容器：（class是我自己定义的，这个容器用一个div就可以）
<div class="fm_box pd-10 border-grey" id="shanxing" style="height: 500px;"></div>
<div class="fm_box pd-10 border-grey" id="zhuzhuang" style="height: 500px;"></div>
然后需要引入我们的echart.min.js.
准备工作做好后，下面就是我们初始化图表的时候了。
首先我们需要定义两个mychart分别作为我们的扇形图和柱状图
var myChart = echarts.init(document.getElementById('shanxing'));
var myChart2 = echarts.init(document.getElementById('zhuzhuang'));
然后分别定义option:就是数据格式的写入：（这里因为有两个图，数据分别用option ，option2来表示）
option = {
title : {
text: '某站点用户访问来源',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
// '直接访问','邮件营销','联盟广告','视频广告','搜索引擎'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '55%'],
data:[
// {value:335, name:'直接访问'},
// {value:310, name:'邮件营销'},
// {value:234, name:'联盟广告'},
// {value:135, name:'视频广告'},
// {value:1548, name:'搜索引擎'}
]
}
]
};
option2 = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['项目数']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'项目',
type:'bar',
data:[],
}
]
};
大家可以看到，我把series里面的data注释掉，或者删除了，因为图表我们一般用来展示动态数据，监控数据变化，固定的图表就没有我写这个博文的意义了。
好的接下来，我们模拟一个json文件。用作我们的数据。很简单的数据格式。
{"result":1,"msg":null,"object":[["网站","微博","微信","论坛","新闻","政务","报刊"],[10,20,180,995,450,250,360]],"totalPage":0,"sum":0}
这个json是一个普通的数据。我们比方说，在后台拿到的就是这么一串json、接下来就是如何解析，并且放入图表绘制的方法中。
我们需要先做请求。
$.ajax({
type: "get",
async: true, //同步执行
url: "tets.json",
dataType: "json", //返回数据形式为json
success: function(data){
console.log(data.object[0].length);
for(var i= 0,len=data.object[0].length;i<len;i++){
var json={};
var data2=data.object[0];
json.name=data.object[0][i];
json.value=data.object[1][i];
option.series[0].data[i]=json;
option.legend.data=data.object[0];
option2.xAxis[0].data=data.object[0];
option2.series[0].data=data.object[1];
}
myChart.clear();
myChart.hideLoading();
myChart.setOption(option);
myChart2.clear();
myChart2.hideLoading();
myChart2.setOption(option2);// 使用刚指定的配置项和数据显示图表。
},
error: function(errorMsg) {
alert("图表请求数据失败啦!");
}
});
其中的url是我们请求数据的接口，当我们请求到数据之后，对数据进行遍历。大家可能看到我在其中定义了一个对象，因为我们根据请求到的数据来看，并不太符合我们的要求，所以我们需要进行数据的转换。
详细的不再多说，自己参考。
我们来说说myChart.clear();myChart.hideLoading();myChart.setOption(option);
第一个是在每一次绘制图标前，做一次初始化，清空画布，目的是为了防止数据没有清理干净，会存在缓存或者什么。这样会影响绘图效果。
第二个是图片绘制的时候一个类似加载的动画效果。还有个myChart.showLoading();
第三个是绘制！相当于调用所有的配置，开始绘制。上边的容器，数据的写入，都是为了准备，而myChart.setOption();才是真正的绘制，使用刚指定的配置项和数据显示图表。
下边是除了容器，配置的完整代码：
//echart
var myChart = echarts.init(document.getElementById('qinggan'));
var myChart2 = echarts.init(document.getElementById('bar'));
option = {
title : {
text: '某站点用户访问来源',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
// '直接访问','邮件营销','联盟广告','视频广告','搜索引擎'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '55%'],
data:[
// {value:335, name:'直接访问'},
// {value:310, name:'邮件营销'},
// {value:234, name:'联盟广告'},
// {value:135, name:'视频广告'},
// {value:1548, name:'搜索引擎'}
]
}
]
};
myChart.hideLoading();
myChart.setOption(option);
option2 = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['项目数']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'项目',
type:'bar',
data:[],
}
]
};
//情感分析图
$.ajax({
type: "get",
async: true, //同步执行
url: "tets.json",
dataType: "json", //返回数据形式为json
success: function(data){
console.log(data.object[0].length);
for(var i= 0,len=data.object[0].length;i<len;i++){
var json={};
var data2=data.object[0];
json.name=data.object[0][i];
json.value=data.object[1][i];
option.series[0].data[i]=json;
option.legend.data=data.object[0];
option2.xAxis[0].data=data.object[0];
option2.series[0].data=data.object[1];
}
myChart.clear();
myChart.hideLoading();
myChart.setOption(option);
myChart2.clear();
myChart2.hideLoading();
myChart2.setOption(option2);// 使用刚指定的配置项和数据显示图表。
},
error: function(errorMsg) {
alert("图表请求数据失败啦!");
}
});