echarts图表库中提供丰富的视图例子，在开发项目过程中我们总免不了需要试图展示的时候，在这方面比较推echarts，页面效果和交互效果是相当不错的。
在项目中使用echarts：
1、在项目中安装依赖：npm install echarts
2、在项目中引入echarts：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在main.js文件中引入echarts，并创建$echarts实例
（注意：echarts5.0以上版本引入时，需要添加* as，否则会引入失败指令为：import * as echarts from 'echarts'）
下面我们就可以开始在页面中使用echarts图表；
3、在页面中创建一个dom节点并绑定id用以承载echarts图表：
<div id="histogram" style="width:100%;height:400px;"></div>
定义一个函数，获取dom节点，初始化我们需要的图表数据，以备渲染：
drawHistogram () {
const myHistogram = this.$echarts.init(document.getElementById('histogram'))
const histogramData = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar', // type值设置图表类型，bar为柱状图
barWidth: '30%', // 柱形的宽度
data: [10, 52, 200, 334, 390, 330, 220]
}
]
}
myHistogram.setOption(histogramData)
}
效果：
echarts图表生成的简单柱状图就完成啦！
附上echarts示例地址：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
在echarts示例中，点击选中示例，就可以在线编辑、查看源码以及查看效果啦！！！！！！！！！！！！！！
