首先引入echarts的js包
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
然后先准备一个容器,存放echarts画好的图,也就是定义一个存放canvas画布div
<div id="main" style="width:100%;height:350px;></div>
接下来路径配置和开始画之前的一些准备,
<script type="text/javascript">
// 路径配置
require.config({
paths: {
'echarts': 'js/echarts',
'echarts/chart/pie': 'js/echarts'
}
}); require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
],
function(ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main')); option = {
//代码主要部分
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
接下来就在 option={}; 这里面写最重要的代码部分
下面这个链接是echarts官网的一个例子链接,http://echarts.baidu.com/demo.html
另外附上一段我自己写的圆环和柱状图:
1.圆环
option = {
title: {
text: '2017年度市级运动员统计汇总',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'horizontal',
x: 'center',
y: '260px',
data: ['普通运动员', '重点人数', '输送人数', '退役人数']
},
toolbox: {
show: true },
calculable: true,
series: [{
name: '访问来源',
type: 'pie',
radius: ['25%','55%'],
center: ['50%', '50%'],
data: [
{ value: , name: '普通运动员' },
{ value: , name: '重点人数' },
{ value: , name: '输送人数' },
{ value: , name: '退役人数' },
]
}],
color:['#f05a4b','#f49902','#1dab91','#0078d7']
};
2.柱状图
option = {
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
x: 'center',
y: '320px',
data:['预计成绩','实际成绩']
},
xAxis: [
{
type: 'category',
data: ['田径','游泳','举重','网球','羽毛球','乒乓球','跆拳道']
}
],
yAxis: [
{
type: 'value',
name: '(奖牌数)',
}
],
series: [
{
name:'预计成绩',
type:'bar',
data:[2,5,6,7,5,2,8],
itemStyle: {
//柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[2, 2, 0, 0]
}
},
barGap:'0%'
},
{
name:'实际成绩',
type:'bar',
data:[5,4,10,4,5,6,4],
itemStyle: {
//柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[2,2, 0, 0]
}
},
barGap:'0%'
}
],
color:['#0078d7','#f49902']
};
最后别忘了这一句,很重要,要不然就显示不出来了。
myChart.setOption(option);
运行效果图:
==================================================================================================================