直接看效果:
//饼图
var echartB;
//柱状图
var echartZ;
var countInfo1="countInfo1";
$(function(){
GainStatisticsData();
});
$(window).resize(function () {
if(echartZ!=undefined){
echartZ.resize();
}
if(echartB!=undefined){
echartB.resize();
}
if(echartL!=undefined){
echartL.resize();
}
});
function GainStatisticsData() {
if (echartZ != undefined) {
echartZ.dispose();
}
echartZ = echarts.init(document.getElementById("chartZ"), "shine"); 基于准备好的dom,初始化echarts实例。init初始化
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['唯丝普水氧焕颜美容仪','库存数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'唯丝普水氧焕颜美容仪',
type:'bar',
data:[1025]
},
{
name:'库存数',
type:'bar',
data:[107]
},
]
};
echartZ.setOption(option, true);
//扇形图
if (echartB != undefined) {
echartB.dispose();
}
echartB = echarts.init(document.getElementById("chartB"), "shine");
option = {
title : {
text: '仪器销售用户访问来源',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data:['唯丝普水氧焕颜美容仪','库存数']
},
series : [
{
name: '唯丝普水氧焕颜美容仪销售库存',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:1025, name:'唯丝普水氧焕颜美容仪'},
{value:107, name:'库存数'},
{},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
echartB.setOption(option, true);
}
然后看效果图:
总结:
这个跟MVC的做法都相差无几,然后就是自己的灵活运用。