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示例中，點擊選中示例，就可以在線編輯、查看源碼以及查看效果啦！！！！！！！！！！！！！！
