ECharts插件的使用（附带案例）
ECharts插件的使用
ECharts的介绍
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
官网地址：https://www.echartsjs.com/zh/index.html
进入官网后选择相应的版本下载就好了。然后是一个js文件直接引入使用就好了。
ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）
ECharts 提供了常规的折线图、柱状图、饼状图、雷达图、K线图、散点图等等…
本次主要说6个案例，每个案例都有详细的注释，也可以直接粘贴复制看运行效果，但是需要注意的是引入的 ECharts插件的文件位置需要以自己的目录为准。
第一个案例：柱形图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 500px;height: 350px;margin: 50px auto;border: #000000 1px solid;
}
</style>
</head>
<body>
<!--给图表准备一个容器-->
<div id="box" ></div>
<script src="../echarts插件/echarts.min.js" ></script>
<script type="text/javascript">
//给容器初始化图表实例
var MyChart=echarts.init(document.getElementById("box"));
//指定图表配置项和数据
var option={
title:{
//left:20,//设置图表标题距离左侧的距离，当然也可以设置右侧
//top:10,//设置图表标题距离上侧的距离，当然也可以设置下侧
//需要注意的是：left，top,right,bottom这几个值是主标题和副标题公用的，主标题设置了，副标题也会随之移动
text:'第周N周销量走向图', //主标题
link:'https://blog.csdn.net/m0_46188681',//设置给主标题指定一个连接地址
target:'self',//设置连接地址的打开方式
textStyle:{ //设置主标题的文本样式
color:'#5555ff',
//fontSize:40
},
subtext:'汽车销售', //副标题
sublink:'http://www.baidu.com',//设置给副标题指定一个连接地址
subtextStyle:{ //设置副标题的文本样式
color:'#0000ff',
fontSize:16
},
},
legend:{},//显示图例说明,把数据对应的name值显示出来
tooltip:{},//显示数据信息
xAxis:{//X轴
data:["周一","周二","周三","周四","周五","周六","周日",] //在X轴上与数据对应的名称
},
yAxis:{},//Y轴
series:[{
name:'汽车销量',
type:'bar',//表示图表类型为柱状图
// type:'line',//表示图表类型为柱状图
data:[10,18,15,20,23,28,30] //Y轴上显示的数据
}]
};
//把配置项和数据显示出来
MyChart.setOption(option);
</script>
</body>
</html>
运行效果：
第二个案例：柱形图的配置以及样式设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 500px;height: 350px;margin: 50px auto;border: #000000 1px solid;
}
</style>
</head>
<body>
<!--给图表准备一个容器-->
<div id="box" ></div>
<script src="../echarts插件/echarts.min.js" ></script>
<script type="text/javascript">
//给容器初始化图表实例
var MyChart=echarts.init(document.getElementById("box"));
//指定图表配置项和数据
var option={
title:{
//left:20,//设置图表标题距离左侧的距离，当然也可以设置右侧
//top:10,//设置图表标题距离上侧的距离，当然也可以设置下侧
//需要注意的是：left，top,right,bottom这几个值是主标题和副标题公用的，主标题设置了，副标题也会随之移动
text:'第周N周销量走向图', //主标题
link:'https://blog.csdn.net/m0_46188681',//设置给主标题指定一个连接地址
target:'self',//设置连接地址的打开方式
textStyle:{ //设置主标题的文本样式
color:'#5555ff',
//fontSize:40
},
},
legend:{//显示图例说明,把数据对应的name值显示出来
//设置汽车销量这个图例名称的样式
right:10,
//bottom:10,
top:10,
textStyle:{
color:'#55ff00',
fontSize:20
},
},
tooltip:{},//显示数据信息
xAxis:{//X轴
name:'日期',
nameTextStyle:{ //坐标轴名称样式
color:'#363636',
fontSize:16,
},
axisLine:{ //坐标轴线设置 ,坐标轴线和坐标轴线下的文字也会一起改变
lineStyle:{
color:'#969696',
width:3 //设置坐标轴线的粗细
}
},
data:["周一","周二","周三","周四","周五","周六","周日",] //在X轴上与数据对应的名称
},
yAxis:{ //设置y轴名称
name:'单位：辆',
nameTextStyle:{ //坐标轴名称样式
color:'#181818',
fontSize:12,
},
axisLine:{ //坐标轴线设置 ,坐标轴线和坐标轴线下的文字也会一起改变
lineStyle:{
color:'#060606',
width:3 //设置坐标轴线的粗细
}
},
},//Y轴
series:[{
name:'汽车销量',
type:'bar',//表示图表类型为柱状图
// type:'line',//表示图表类型为柱状图
data:[10,18,15,20,23,28,30] ,//Y轴上显示的数据
markLine:{//图表标线
data:[{type:"max",name:'最大值'}],
//'min' 最小值。'' 最大值。'average' 平均值。'median' 中位数 name：鼠标移入到线条上时，显示的汉字
lineStyle:{
color:'#55ff7f',
width:2
}
}
}]
};
//把配置项和数据显示出来
MyChart.setOption(option);
</script>
</body>
</html>
运行效果图：
第三个案例：柱形图和折线图切换效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 600px;height: 500px;
}
.button{
width: 150px;height:30px;line-height: 30px;
position: relative;left: 600px;top: -480px;
}
</style>
<!--官网地址：https://www.echartsjs.com/zh/index.html-->
<!--ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）-->
<!--ECharts 提供了常规的折线图、柱状图、饼状图、雷达图、K线图、散点图....-->
</head>
<body>
<!--给图表准备一个容器-->
<div id="box" ></div>
<!-- 切换按钮 -->
<div class="button">
<button id="line">折线图</button>
<button id="bar">柱状图</button>
</div>
<script src="../echarts插件/echarts.min.js" ></script>
<script type="text/javascript">
//给容器初始化图表实例
var MyChart=echarts.init(document.getElementById("box"));
//指定图表配置项和数据
var option={
title:{
//left:20,//设置图表标题距离左侧的距离，当然也可以设置右侧
//top:10,//设置图表标题距离上侧的距离，当然也可以设置下侧
//需要注意的是：left，top,right,bottom这几个值是主标题和副标题公用的，主标题设置了，副标题也会随之移动
text:'第周N周销量走向图', //主标题
link:'https://blog.csdn.net/m0_46188681',//设置给主标题指定一个连接地址
target:'self',//设置连接地址的打开方式
textStyle:{ //设置主标题的文本样式
color:'#5555ff',
//fontSize:40
},
},
legend:{//显示图例说明,把数据对应的name值显示出来
//设置汽车销量这个图例名称的样式
right:10,
//bottom:10,
top:10,
textStyle:{
color:'#55ff00',
fontSize:20
},
},
// color:['#ff0000','#00ff00','#0000ff'],//调色盘颜色列表
tooltip:{},//显示数据信息
xAxis:{//X轴
name:'日期',
nameTextStyle:{ //坐标轴名称样式
color:'#363636',
fontSize:16,
},
axisLine:{ //坐标轴线设置 ,坐标轴线和坐标轴线下的文字也会一起改变
lineStyle:{
color:'#969696',
width:3 //设置坐标轴线的粗细
}
},
data:["周一","周二","周三","周四","周五","周六","周日",] //在X轴上与数据对应的名称
},
yAxis:{ //设置y轴名称
name:'单位：辆',
nameTextStyle:{ //坐标轴名称样式
color:'#181818',
fontSize:12,
},
axisLine:{ //坐标轴线设置 ,坐标轴线和坐标轴线下的文字也会一起改变
lineStyle:{
color:'#060606',
width:3 //设置坐标轴线的粗细
}
},
},//Y轴
series:[{
name:'汽车销量',
type:'bar',//表示图表类型为柱状图
// type:'line',//表示图表类型为柱状图
data:[10,18,15,20,23,28,30] ,//Y轴上显示的数据
markLine:{//图表标线
data:[{type:"max",name:'最大值'}],
//'min' 最小值。'' 最大值。'average' 平均值。'median' 中位数 name：鼠标移入到线条上时，显示的提汉字
lineStyle:{
color:'#55ff7f',
width:2
}
}
}]
};
//把配置项和数据显示出来
MyChart.setOption(option);
//切换到柱状图按钮
document.getElementById("bar").onclick=function(){
option.series[0].type='bar';
MyChart.setOption(option);
}
//切换到折线图按钮
document.getElementById("line").onclick=function(){
option.series[0].type='line';
MyChart.setOption(option);
}
</script>
</body>
</html>
运行结果：
第四个案例：多条数据的设置方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 500px;height: 350px;margin: 50px auto;border: #000000 1px solid;
}
</style>
<!--官网地址：https://www.echartsjs.com/zh/index.html-->
<!--ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）-->
<!--ECharts 提供了常规的折线图、柱状图、饼状图、雷达图、K线图、散点图....-->
</head>
<body>
<!--给图表准备一个容器-->
<div id="box" ></div>
<script src="../echarts插件/echarts.min.js" ></script>
<script type="text/javascript">
//给容器初始化图表实例
var MyChart=echarts.init(document.getElementById("box"));
//指定图表配置项和数据
var option={
title:{
//left:20,//设置图表标题距离左侧的距离，当然也可以设置右侧
//top:10,//设置图表标题距离上侧的距离，当然也可以设置下侧
//需要注意的是：left，top,right,bottom这几个值是主标题和副标题公用的，主标题设置了，副标题也会随之移动
text:'第周N周销量走向图', //主标题
link:'https://blog.csdn.net/m0_46188681',//设置给主标题指定一个连接地址
target:'self',//设置连接地址的打开方式
textStyle:{ //设置主标题的文本样式
color:'#5555ff',
//fontSize:40
},
},
legend:{//显示图例说明,把数据对应的name值显示出来
//设置汽车销量这个图例名称的样式
right:10,
//bottom:10,
top:10,
textStyle:{
color:'#1f5f00',
fontSize:20
},
},
color:['#ff0000','#aaff00','#0000ff'],//调色盘颜色列表
tooltip:{},//显示数据信息
xAxis:{//X轴
name:'日期',
nameTextStyle:{ //坐标轴名称样式
color:'#363636',
fontSize:16,
},
axisLine:{ //坐标轴线设置 ,坐标轴线和坐标轴线下的文字也会一起改变
lineStyle:{
color:'#969696',
width:3 //设置坐标轴线的粗细
}
},
data:["周一","周二","周三","周四","周五","周六","周日",] //在X轴上与数据对应的名称
},
yAxis:{ //设置y轴名称
name:'单位：辆',
nameTextStyle:{ //坐标轴名称样式
color:'#181818',
fontSize:12,
},
axisLine:{ //坐标轴线设置 ,坐标轴线和坐标轴线下的文字也会一起改变
lineStyle:{
color:'#060606',
width:3 //设置坐标轴线的粗细
}
},
},//Y轴
series:[{
name:'北京现代',
type:'bar',//表示图表类型为柱状图
// type:'line',//表示图表类型为柱状图
data:[10,18,15,20,23,28,30],//Y轴上显示的数据
markLine:{//图表标线
data:[{type:"max",name:'最大值'}],
//'min' 最小值。'' 最大值。'average' 平均值。'median' 中位数 name：鼠标移入到线条上时，显示的提汉字
lineStyle:{
color:'#55ff7f',
width:2
}
},
},{
name:'奔驰',
type:'bar',//表示图表类型为柱状图 ，当然也可以换成折线图值
data:[9,12,17,15,18,6,19] //数据
},
{
name:'大众',
type:'bar',//表示图表类型为柱状图 ，当然也可以换成折线图值
data:[5,22,12,25,13,16,20] //数据
}
]
};
//把配置项和数据显示出来
MyChart.setOption(option);
</script>
</body>
</html>
运行结果：
第五个案例：饼图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 700px;height: 500px;border: 2px solid #000000;margin: 0 auto;
}
</style>
</head>
<body>
<!--给图表准备一个容器-->
<div id="box" ></div>
<script src="../echarts插件/echarts.min.js" ></script>
<script type="text/javascript">
//给容器初始化图表实例
var myChart=echarts.init(document.getElementById("box"));
//指定图表配置项和数据
var option={
title:{text:'汽车销量'},
tooltip:{},
legend:{},
series:[{
type:'pie',//表示图表类型为饼状图
radius:'60%',//设置饼状图大小
data:[ //数据
{name:'周一',value:'10'},
{name:'周二',value:'12'},
{name:'周三',value:'18'},
{name:'周四',value:'13'},
{name:'周五',value:'119'},
{name:'周六',value:'25'},
{name:'周日',value:'11'},
]
}]
};
//把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
运行结果：
第六个案例：雷达图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 600px;height: 500px;border: 1px solid #000000;margin: 0 auto;
}
</style>
</head>
<body>
<!--给图表准备一个容器-->
<div id="box" ></div>
<script src="../echarts插件/echarts.min.js" ></script>
<script type="text/javascript">
//给容器初始化图表实例
var myChart=echarts.init(document.getElementById("box"));
//指定图表配置项和数据
var option={
title:{text:'汽车销量'},
tooltip:{},
legend:{},
radar:{//雷达图坐标系组件，只适用于雷达图
name:{//雷达图每个指示器名称的配置项
textStyle:{
color:'#ffffff',
backgroundColor:'#999',
padding:[3,5],
borderRadius:5
}
},
indicator:[//雷达图的指示器，用来指定雷达图中的多个变量（维度）
{name:'周一',max:30},
{name:'周二',max:40},
{name:'周三',max:50},
{name:'周四',max:50},
{name:'周五',max:50},
{name:'周六',max:40},
{name:'周日',max:30},
]
},
series:[{
type:'radar',//表示图表类型为雷达图
data:[{
name:'宝马',
value:[25,38,48,42,38,18,22]
},{
name:'大众',
value:[15,28,26,32,40,38,26]
}]
}]
};
//把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
运行结果：
当然远远不止这些，在这个官网地址里面，还有很多的实例，有了基础，再去看实例就能明白，到时候需要什么类型的图表，直接看实例，然后自己再修改也是可以的。
实例地址：实例地址
.