模块化开发或者了解更多可以去官网http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="height:400px;border:1px solid #ccc;overflow-x: hidden"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
// echarts: './js'
echarts: 'http://echarts.baidu.com/build/dist'
}
});
var idx = 1;
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/tree',
'echarts/chart/pie',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: ['违章次数', '扣分']
},
toolbox: {
show: false,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['超速', '乱停', '11', '12', '1', '2', '3']
}
],
yAxis: [
{
type: 'value',
splitArea: {show: true}
}
],
series: [
{
name: '违章次数',
type: 'bar',
data: [2.0, 1, 1, 2, 1, 1, 1, 1, 1, 2, 4, 3]
},
{
name: '扣分',
type: 'bar',
data: [2.6, 2.9, 2.0, 2.4, 2.7, 2.7, 2, 2.2, 2.7, 2.8, 2, 2.3]
},
// {
// name:'违章类型',
// type:'bar',
// data:[2.6, 2.9, 2.0, 2.4, 2.7, 2.7, 2, 2, 2.7, 2.8, 6.0, 2.3]
// }
]
});
// --- 地图 ---
var myChart2 = ec.init(document.getElementById('mainMap'));
myChart2.setOption({
timeline: {
data: [
'1', '2', '3', '4', '5',
{name: '6', symbol: 'emptyStar6', symbolSize: 8},
'7', '8', '9', '10', '11',
{name: '12', symbol: 'star6', symbolSize: 8}
],
label: {
formatter: function (s) {
return s.slice(0, 7);
}
}
},
options: [
{
title: {
text: '扣分占比变化',
subtext: ''
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
data: ['', '', '', '', '']
},
toolbox: {
show: false,
feature: {
mark: {show: false},
dataView: {show: false, readOnly: false},
magicType: {
show: false,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1700
}
}
},
restore: {show: false},
saveAsImage: {show: false}
}
},
series: [
{
name: '扣分',
type: 'pie',
center: ['50%', '45%'],
radius: '50%',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
},
{
series: [
{
name: '扣分',
type: 'pie',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
]
}
]
}
]
});
}
);
</script>
</body>
</html>
网友评论