一、本篇文章將給大家分享如何在vue中使用echart以及echart各項配置，這些配置都是工作中比較常見以及常用到的，所以給大家分享下，希望對大家有用。
二、vue中使用echart。
1、首先下載echart依賴，這里采用的npm包管理工具，在項目中運行命令：
npm install echarts --save-dev
2、在main.js里引入echart：
import echarts from 'echarts';
3、在vue中注冊echart：
Vue.prototype.$echarts = echarts;
4、在vue中使用echart：
<template>
<div style="height:400px;width: 1000px" id="echartDemo">
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted(){
initEchart()
},
methods:{
initEchart(){
//初始化echart實例，獲取dom
var echartDemo=this.$echarts.init(document.getElementById('echartDemo'));
option = {
color: ['#618FC8'],
backgroundColor:'#F8F8F8',
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top:20,
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Decade Ⅰ', 'Decade Ⅱ', 'Decade Ⅲ'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value',
min:1600,
max:2100,
interval: 50,
}
],
series : [
{
name:'新增訂單',
type:'bar',
barWidth: '40%',
data:[1770, 1852, 2000]
}
]
};
echartDemo.setOption(option);
}
},
components:{
}
}
</script>
5.如果echart中使用到的數據比較大比較多的話可以考慮放到vuex里邊，小數據可直接放到data里邊就可以。
三、echart的各項配置
1.先介紹下一些常見的全局配置：
1.1、title組件，包含表的主標題和副標題的相關配置；
1.2、legend組件，圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。
比如：
legend: {
data:['利潤', '支出', '收入']
},
1.3、xAxis，yAxis主要是X軸跟Y軸的一些配置；
1.4、tooltip組件也是用的比較多的，就是鼠標移上去那個提示框的配置。
1.5、toolbox工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。類似下圖：
1.6、grid主要是配置表中的整天布局，比如距離距離邊距多寬等。
1.7、series是系列列表，可以理解為主要的列表數據已經配置都在里邊，對象里邊的type這代表為不同的表，比如bar代表柱狀圖。
2.下邊進入實際開發中的常見配置。
2.1、第一個問題：當你X軸的文本過長或者想旋轉斜着放這么辦呢，這時候就需要自己配置xAxis的axisLabel，
比如想文本過長實現換行，則可以這樣配置：
xAxis : [ { type : 'category', data : xAxisdata, axisLabel : { interval : 0, formatter : function(params){ var newParamsName = ""; var paramsNameNumber = params.length; var provideNumber = 7; var rowNumber = Math.ceil(paramsNameNumber / provideNumber); if (paramsNameNumber > provideNumber) { for (var p = 0; p < rowNumber; p++) { var tempStr = ""; var start = p * provideNumber; var end = start + provideNumber; if (p == rowNumber - 1) { tempStr = params.substring(start, paramsNameNumber); } else { tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; } } else { newParamsName = params; } return newParamsName } } } ]
這個是7個字符就實現換行，如圖：
如果想文本斜着放，旋轉一些角度，則這樣配置：
axisLabel:{ show:true, rotate:45, },
則實現這樣的效果：
2.不顯示Y軸或者不現實X軸，或者數值顯示更改：
show設為false則不顯示。
3.要默認顯示表格上的數值，則配置series下：
效果：
4.多表混合的情況，比如一個柱狀圖和折線圖混合，並且需要兩個Y軸的情況，則：
yAxis: [ { type: 'value', min: 0, name:'region', max: 100.00, interval: 10, splitLine:{show: false},//去除網格線 axisLabel: { formatter: '{value} %' } }, { type: 'value', name: 'Increase', min: -100, max: 600, interval: 50, splitLine:{show: false},//去除網格線 show:true, axisLabel: { formatter: '{value} %' }, } ],//配置兩條Y軸
則在series下通過yAxisIndex去選擇哪個Y軸，比如：
{ name:'West', type:'bar',//柱狀圖 itemStyle:{ normal:{ color:'#D1D1D1', } }, data:West }, { name:'National', type:'line',//折線圖 yAxisIndex: 0,//選擇第一個Y坐標 data:National, itemStyle : { normal : { color:'#9F5E36', lineStyle:{ color:'#9F5E36' }, borderWidth:5, label: {show: true,color:'#000'}, } }, },
5.柱狀圖每個柱子需要配置不一樣的顏色的時候怎么辦呢？
series: [ { type: 'bar', data: [18203, 23489, 29034, 14970], itemStyle:{ normal:{ color:function(params){ var colorList = ['#D4C880','#D1D1D1','#01A3D4','#8EA9C4']; return colorList[params.dataIndex] ; } }//多個顏色柱子 }, label:{ normal:{ show:true, position:'right' } } }, ]
效果圖：
6、其他配置
textStyle一般為配置字體樣式，包括顏色啊，字體大小等等；
formatter一般為自定義配置項。
時間問題，先給大家分享到這里，有時間再完善，有問題可評論里邊一起探討，謝謝。