echarts的基本使用及其插件下载
echarts的基本介绍
ECharts是一个免费的、功能强大的、可视化的一个库。它可以非常简单的往软件产品中添加直观的、动态的和高度可定制化的图表。它是一个全新的基于zrender的用纯JavaScript打造完成的canvas库。
echarts的简单使用
1.需要在官网下载echarts.js文件
echarts.js插件可直接下载使用，提取码：d051
实现效果如下：
2.直接在html文件中引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>monthly form</title>
<link rel="stylesheet" type="text/css" href="./demo.css"/>
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1200px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// // 指定图表的配置项和数据
var option = {
title : {
text: 'echarts入门例子',
subtext: '纯属虚构',
},
tooltip: {},
legend: {
data:['月报表',"降水量"]
},
toolbox: { //工具栏
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis: {
axisTick:{ //---坐标轴 刻度
show:false, //---是否显示
},
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//坐标线的颜色样式
lineStyle:{
color:'#efefef',
width:1,
type:'solid',
},
},
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
axisLabel: { //x坐标轴文本字体的样式设置
show: true,
textStyle: {
color: '#333',
padding:[10,0,0,0,0]
}
}
},
yAxis: {
min: 0,
max: 1000,
interval: 250, //间隔
axisTick:{ //---坐标轴 刻度
show:false, //---是否显示
},
axisLine:{ //---坐标轴 轴线
show:false, //---是否显示
},
splitLine:{ //---grid 区域中的分隔线
show:true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
lineStyle:{
color:'#f0f0f0',
width:1,
type:'dashed', //---类型
},
},
axisLabel: { //y坐标轴文本字体的样式设置
show: true,
textStyle: {
color: '#9baeba',
padding:[0,20,0,0]
}
},
},
series: [
{
name:"月报表",
type: 'bar',
barWidth: 25,
barCategoryGap:'5%', //---柱形间距
itemStyle: { // 系列级个性化样式，纵向渐变填充
normal: {
color: '#3ba1ff', //设置柱状的颜色
label: {
show: true, //开启柱状图的数值显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#a3a6b3',
fontSize: 12
}
}
}
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
data: [225, 243, 636, 310, 340, 420,432,521,64,721,239,345]
},
{
name:'降水量',
type:'bar',
barWidth: 25,
barCategoryGap:'5%', //---柱形间距
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
itemStyle: { // 系列级个性化样式，纵向渐变填充
normal: {
label: {
show: true, //开启柱状图的数值显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#a3a6b3',
fontSize: 12
}
}
}
},
markPoint : { //标志最大值和最小值
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>