echarts 图表 - ECharts.js
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript">
function zhexiantu(){
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计 折线图'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'访问量',
type:'line',
data:[500,200,360,100]
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chart1'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
}
function quxiantu(){
option = {
title:{
text:'曲线图'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
var myChart = echarts.init(document.getElementById('chart2'));
myChart.setOption(option);
}
function zhexiantu2(){
var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {},
magicType: {//动态类型切换
type: ['bar', 'line']
},
dataView: { //数据视图
show: true
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
var myChart = echarts.init(document.getElementById('chart3'));
myChart.setOption(option);
}
function zhuxingtu(){
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
barWidth: 30,
itemStyle:{
normal:{
color:'#4ad2ff'
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
var myChart = echarts.init(document.getElementById('chart4'));
myChart.setOption(option);
}
function yuantu(){
var data = {
legendData: ['赵', '钱', '孙', '李'],
seriesData: [{name: '赵', value: 0.1}, {name: '钱', value: 0.2}, {name: '孙', value: 0.5}, {name: '李', value: 0.3}],
};
var option = {
title : {
text: '同名数量统计',
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.seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var myChart = echarts.init(document.getElementById('chart6'));
myChart.setOption(option);
}
window.onload=function(){
zhexiantu(); //折线图
quxiantu(); //曲线图
zhuxingtu(); //柱形图
zhuxingtu2(); //柱形图堆叠
yuantu(); //圆形图
}
</script>
<div id="chart1" style="width:600px; height: 400px;"></div>