一、基本使用
1.导入echarts.js
https://echarts.apache.org/zh/download.html
2.开始绘制
（1）准备一个dom容器存放echarts
（2）初始化echarts实例并添加到刚刚所准备的容器中
（3）配置图表数据
（4）将配置好的图表添加到实例中
3.效果图
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//标题
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
//横坐标
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//纵坐标根据数据的差值生成
yAxis: {},
series: [{
name: '销量',
type: 'bar',
//数据
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
二、使用图表样式并进行修改
可以在Gallery网站中选择适合的图表样式进行快速应用
1.选择所需的样式，复制左侧的代码替换到我们的option中并适当的调整容器的大小即可
2.替换数据
（1）将准备好的横坐标和数据替换到option中
（2）替换横坐标
（3）替换数据
3.效果图
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 850px;height:400px;"></div>
</body>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript">
var xArr = ['横坐标1','横坐标2','横坐标3','横坐标4','横坐标5','横坐标6','横坐标7','横坐标8',]
var dataArr = [100, 600, 300, 100, 250, 500,400,749];
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//背景色
backgroundColor: '#00265f',
//标题
"title": {
"text": "测试图表",
x: "center",
y:"4%",
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '15%',
right: '3%',
left: '5%',
bottom: '12%'
},
//x轴配置
xAxis: [{
type: 'category',
data: xArr, //替换横坐标
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: {
fontSize: 14
},
},
}],
//y轴配置
yAxis: [{
name: '单位：元',
axisLabel: {
formatter: '{value}',
color: '#e2e9ff',
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,1)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
}],
series: [{
type: 'bar',
data: dataArr, //替换数据
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,244,255,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0,77,167,1)' // 100% 处的颜色
}], false),
barBorderRadius: [30, 30, 30, 30],
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
}
},
label: {
normal: {
show: true,
lineHeight: 30,
width: 80,
height: 30,
backgroundColor: 'rgba(0,160,221,0.1)',
borderRadius: 200,
position: ['-8', '-60'],
distance: 1,
formatter: [
' {d|●}',
' {a|{c}} \n',
' {b|}'
].join(','),
rich: {
d: {
color: '#3CDDCF',
},
a: {
color: '#fff',
align: 'center',
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: '#234e6c',
align: 'left'
},
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>