echarts图表插件的使用

1.折线图
option = {
title: {
text: '数据操作统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['数据操作统计']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
show: 'true',
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']  //x轴
},
yAxis: {
type: 'value',
        axisLabel: {
                 formatter: '{value} 个'  //y轴格式化
               }
},
series: [
{
name: '数据操作',
type: 'line',
stack: '总量',
itemStyle : {
normal: {
color:'#3d9c24',//折点颜色
lineStyle:{
color:'#3d9c24' //折线颜色
}
}
},
data: [20, 32, 11, 34, 9, 23, 21, 12, 11, 11, 11, 44]  //数据
}
]
};

var myChart = echarts.init(document.getElementById(放置折线图的div));//div需有宽高，且不能是百分比
myChart.setOption(option);

2.柱状图

option2 = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], //x轴
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60px', //z柱宽
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', //柱颜色
'#FE8463', '#9BCA63'];
return colorList[params.dataIndex]
},　//以下为是否显示，显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
// formatter: '{c}'
formatter: '{b}\n{c}'
}
}
},
data: [10, 52, 200, 334, 390, 330, 220] //数据
}
]
};

var myChart2 = echarts.init(document.getElementById('chart2'));
myChart2.setOption(option2);



3.饼图

option3 = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
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: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color: ['red', 'green', 'yellow', 'blueviolet','black'] //饼颜色
};
var myChart3 = echarts.init(document.getElementById('chart3'));
myChart3.setOption(option3);