数据调用
其中data为数组:例:data=data:[{“name”:“陶”,“value”:10},{“name”:“黄”,“value”:20},{“name”:“季”,“value”:30},{“name”:“费”,“value”:20},{“name”:“奚”,“value”:40}]
viewBing(data.edu,‘main’,“学历统计”);
viewZhu(data.edu,‘main1’,“学历统计”,“人数”);
一、饼形图
1、html
<div id="main" style="width: 600px;height: 400px;"></div>
<!-- <div id="main2" style="width: 600px;height: 400px;"></div> -->
2、模板
数据类型:data=data:[{“name”:“陶”,“value”:10},{“name”:“黄”,“value”:20},{“name”:“季”,“value”:30},{“name”:“费”,“value”:20},{“name”:“奚”,“value”:40}]
id:标签的id
title:标题
function viewBing(data,id,title){
//基于准备好的dom,初始化echarts实例
var myChart=echarts.init(document.getElementById(id));
//指定图表的配置项和数据
/* var data = genData(40);
console.dir(data.legendData) */
option = {
title : {
text:title, //标题
//subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
//data:data.legendData
//selected: data.selected
},
series : [
{
name: '姓名',
type: 'pie',
radius : '55%',
center: ['40%', '50%'],
data:data,
//data:[{"name":"陶","value":10},{"name":"黄","value":20},{"name":"季","value":30},{"name":"费","value":20},{"name":"奚","value":40}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option,true);
}
二、柱形图
1、html
<div id="main" style="width: 600px;height: 400px;"></div>
<!-- <div id="main2" style="width: 600px;height: 400px;"></div> -->
2、模板
function viewZhu(data,id,title,name){
var arr=new Array();
var arr1=new Array();
$.each(data,function(key,value){
arr.push(value.name);
arr1.push(value.value);
});
//基于准备好的dom,初始化echarts实例
var myChart=echarts.init(document.getElementById(id));
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
//data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data:arr,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
//name:'人数',
name:name,
type:'bar',
barWidth: '60%',
//data:[10, 52, 200, 334, 390, 330, 220]
data:arr1
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option,true);
}
3、颜色渐变折线图
var myChart;
function zhexin(){
var date=["陶","黄","季","费","奚"];
var data=[10,20.5,30.5,10.5,40.5];
//初始化
//var myChart=echarts.init(document.getElementById("zhexian"));
if(myChart !="" && myChart != null && myChart!=undefined){
myChart.dispose();
}
myChart=echarts.init(document.getElementById("zhexian"));
option = {
grid: {
show:true,
top:'3%',
left: '2%',
right: '4.5%',
bottom: '3%',
containLabel: true,
//backgroundColor:'#ccc',
//shadowColor:'#ccc',
//borderColor:'#ccc'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}/* ,
formatter: function (params) {
return params[0].axisValue + '<br />' + params[0].data+type;
} */
},
animation: false,
xAxis: {
type: 'category',
boundaryGap: false,
data: date,
inverse:true//反序
},
yAxis: {
type: 'value',
//inverse:true
},
series: [{
name:name,
data: data,
type: 'line',
color: '#8cd5c2',
areaStyle: {normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#8cd5c2'},
{offset: 0.5, color: '#76EEC6'},
{offset: 1, color: '#fff'}
]
)
}}
}]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option,true);
}