简介：
一个适应javascript实现的开源可视化库（js插件）。可以流畅的运行在PC端和移动端上，兼容当前大部分浏览器（ie8及以上），底层依赖矢量图形库ZRender，提供直观、交互丰富、可高度自定义化的数据可视化图表。
使用步骤（五部曲）：
1、下载并引入echarts.js文件
2、准备一个具备大小（确定宽高）div容器用来装图表
3、初始化echarts实例对象 ： var myChart = echarts.init(dom容器);
(在vue项目中 : let myChart = this.$echarts.init(dom容器);)
4、指定配置项和数据（option{}）
5、将配置项设置给echarts实例对象 ：myChart .setOption(option);
此外，若要设置图表也随屏幕自适应宽度:
//监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function () {
myChart.resize();
});
<!-- 记得给bar设置宽高-->
<div class="bar">
<!-- 图表名 -->
<h2>柱状图-就业行业</h2>
<!-- 内容 -->
<div class="chart"></div>
<!-- 创建一个空标签，解决下面两个小直角 -->
<div class="panel-footer"></div>
</div>
<script src="../js/echarts.min.js"></script>
// 初始化echarts实例对象
var myBarLfet = echarts.init(document.querySelector('.bar-left'));
// 指定配置项和数据
var option = {
color: ['#3398DB'],
// 图表提示框组件
tooltip: {
// 触发方式：axis坐标轴，可看配置项手册
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
// 图例组件
// legend:{
// data:[]
// },
// 工具箱组件：下载图表为图片
toolbox: {
feature: {
saveAsImage: {}
}
},
// 网格配置：控制图表的范围/大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// containLabel：刻度显示
containLabel: true
},
// 横坐标
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
// 纵坐标
yAxis: [
{
type: 'value'
}
],
// 系列图表配置
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
// 将配置项给实例对象
myBarLfet.setOption(option);
坐标轴修改字体颜色：
axisLabel: {
color: '#4c9bfd' // 文本颜色
}
其他修改字体：
textStyle: {
color: ' #4c9bfd',
}
分割线设置：
splitLine:{
lineStyle: {
color: '#012f4a'
}
}
