Vue使用Echarts以及Echarts配置分享
一、本篇文章将给大家分享如何在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一般为自定义配置项。
时间问题，先给大家分享到这里，有时间再完善，有问题可评论里边一起探讨，谢谢。
