Vue接入Echarts 顯示柱狀圖餅圖

使用CLI接入

npm install echarts --save

1.可以全局引入(在main.js)

// 引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

2.或者局部引入(在script)

import echarts from 'echarts'

直接在template里面寫上 div容器

在下邊script里邊直接繪制

export default {

name: 'hello',

data () {

return {

msg: 'Welcome to Your Vue.js App'

}

},

mounted(){

this.drawLine();

},

methods: {

drawLine(){

// 基于準備好的dom，初始化echarts實例

let myChart = this.$echarts.init(document.getElementById('myChart'))

// 繪制圖表

myChart.setOption({

title: { text: '在Vue中使用echarts' },

tooltip: {},

xAxis: {

data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]

},

yAxis: {},

series: [{

name: '銷量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

});

}

}

}

這樣的基本顯示案例就完成了

然后根據你自己的要求去官網的案例里面找 合適你自己的

注意：官網上都是寫了一個 option 你把這個配置好 直接在方法里面 setOption( option ) 就可以了

option 里邊的內容很簡單 就能看懂

知識點1

myChart.setOption({...},true)

設置為true的話，就是notMerge，不合并

false的話，就Merge，之前的東西還保留~

要是需要重新渲染的時候 可以設置清空

myChart.clear();

知識點2

你要自己設定顏色的話就寫個color

color: ["#2bb5e4","#90ed7d"],

當系列數量個數比顏色列表長度大時將循環選取

知識點3 (網上看見的)

圖表選項，包含圖表實例任何可配置選項：?公共選項 ，?組件選項 ，?數據選項

名稱

描述

{color}backgroundColor

全圖默認背景，(詳見backgroundColor)，支持rgba，默認為無，透明

{Array}?color

數值系列的顏色列表，(詳見color)，可配數組，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，當系列數量個數比顏色列表長度大時將循環選取

{boolean}renderAsImage

非IE8-支持渲染為圖片，(詳見renderAsImage)

{Object}?timeline

時間軸(詳見timeline)，每個圖表最多僅有一個時間軸控件

{Object}?title

標題(詳見title)，每個圖表最多僅有一個標題控件

{Object}?toolbox

工具箱(詳見toolbox)，每個圖表最多僅有一個工具箱

{Object}?tooltip

提示框(詳見tooltip)，鼠標懸浮交互時的信息提示

{Object}?legend

圖例(詳見legend)，每個圖表最多僅有一個圖例，混搭圖表共享

{Object}?dataRange

值域選擇(詳見dataRange),值域范圍

{Object}?dataZoom

數據區域縮放(詳見dataZoom),數據展現范圍選擇

{Object}?roamController

漫游縮放組件(詳見roamController),搭配地圖使用

{Object}?grid

直角坐標系內繪圖網格(詳見grid)

{Array | Object}?xAxis

直角坐標系中橫軸數組(詳見xAxis)，數組中每一項代表一條橫軸坐標軸，標準(1.0)中規定最多同時存在2條橫軸

{Array | Object}?yAxis

直角坐標系中縱軸數組(詳見yAxis)，數組中每一項代表一條縱軸坐標軸，標準(1.0)中規定最多同時存在2條縱軸

{Array}?series

驅動圖表生成的數據內容(詳見series)，數組中每一項代表一個系列的特殊選項及數據

標簽：Vue,color,Object,myChart,echarts,圖表,詳見,柱狀圖,Echarts

來源： https://www.cnblogs.com/tcz1018/p/13130495.html

總結

以上是生活随笔為你收集整理的前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。