Echarts图表调用实例
下载Echarts完整代码：http://echarts.baidu.com/download.html；
var chartone=echarts.init(document.getElementById('chartone')); //实例化
//引用Echarts官网option代码，详细属性配置参考官方配置手册http://echarts.baidu.com/option.html#title
optionOne = {
title : {
text: ''
},
color:['#444f59','#df9453','rgba(68, 79, 89, 0.57)'],
tooltip : {
trigger: 'axis',
formatter:function(p){
var aa=p[0];
var bb=p[1];
var cc=p[2];
return aa.name+'<br/>'+'销量：'+aa.value+'<br/>'+'周转率：'+bb.value+"%";
}
},
legend: {
data:['销量','周转率'],
top:22,
right:15
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : {
axisLabel:{
interval:0 ,
formatter:function(val){
return val.substring(6,10);
}
},
type: 'category',
boundaryGap: true,
data: ['16NR6E160', '16NR5L020', '16NR6E15A', '16NR2B03B', '16NR1N010']
},
yAxis : [
{
name:'件',
type : 'value'
},
{
type: 'value',
splitLine:{show:false},
axisLabel: {
formatter: '{value}%'
}
}
],
series : [
{
name:'销量',
type:'bar',
data:[ 55, 45,36, 33, 28]
},
{
name:'周转率',
yAxisIndex: 1,
type:'line',
// smooth: true,
data:[5.03, 5.43, 5.0, 4.73, 3.55]
}
]
};
chartone.setOption(optionOne); //渲染Echarts图表
效果图如下：
