echarts配置参数详解说明，及echarts在Vue项目的使用，文本以柱状图为例

一、echarts在vue项目的使用

首先安装echarts依赖包

            npm install echarts -S                                                                                    

当然如果你安装了淘宝镜像，你也可以使用淘宝镜像安装，速度会更快一些

            cnpm install echarts -S                                                                                    

其次引入echarts到项目中

本文以vue项目为例子：在项目的main.js文件中

// 引入echarts

import echarts from 'echarts';

// 把echarts注册到vue的原型上，方便在组件直接通过this.$echarts来使用

Vue.prototype.$echarts = echarts;

然后在vue项目使用组件中： 如我的项目中productQuery.vue组件使用echarts

<!-- 绘画柱状图 继承父容器的大小 可以是百分比--> 方式一

<div id="myChart" :style="{width: '100%', height: '86%'}"></div>

<!-- 绘画柱状图 大小固定，写死 --> 方式二

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

二、echarts各参数的详细配置说明（各参数并非必须配置，看项目需求进行配置）

drawing()方法为绘画方法，通常在后端返回数据回调里再调用此方法，因为数据乃是异步获取的，在created或者mounted钩子里调用可能数据还没有拿到。

// 绘画柱状图

drawing() {

// 基于准备好的dom (上文的productQuery.vue组件的DOM)，初始化echarts实例

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

var progressData = this.progressData;

// 绘制图表

myChart.setOption({

// 本坐标系特定的 tooltip 设定

tooltip: {

trigger: "axis", // 触发类型

axisPointer: { // 坐标轴指示器配置项

type: "shadow"

}

},

// 例组件展现了不同系列的标记(symbol)，颜色和名字，看项目需求，一般不需要

legend: {

data: ["2011年", "2012年"]

},

grid: { // 控制图的位置

left: "-5%",

right: "10%",

bottom: "16%",

containLabel: true

},

xAxis: {

name:'数量',

type: "value",

nameTextStyle:{ // X轴的名称的样式，可以配置除了color,还有fontsize等等

color:'rgba(0,0,0,.6)'

},

boundaryGap: [0, 0.01],

nameGap: 2,//坐标轴名称与轴线之间的距离

splitLine: { show: false }, //去除网格线

//坐标轴设置

axisLine: {

show: true,

onZero: true,

//onZeroAxisIndex: ...,

symbolSize: [30, 50],

//轴线设置

lineStyle: {

color: 'rgb(221,221,221)',

width: 1,

type: 'solid',//'solid',dashed,dotted

//shadowBlur: ...,

//shadowColor: ...,

shadowOffsetX: 0,

shadowOffsetY: 0,

//opacity: ...,

},

},

//坐标轴刻度设置

axisTick: {

show: false,

alignWithLabel: false,

interval: 'auto',

inside: false,//坐标轴刻度是从内还是从无外

length: 5,//刻度长度

lineStyle: {

color: 'blue',

width: 3,

type: 'solid',

},

},

//刻度标签设置

axisLabel: {

show: true,

interval: 'auto',

//formatter: '{value}%',

interval: 'auto',

inside: false,//刻度标签朝内还是朝外

// margin: 35,//刻度标签与轴线之间的距离。

formatter:function(value,index){return value},

showMinLabel: null,

showMaxLabel: null,

color: '#000',

fontStyle: 'normal',

fontWeight: 'normal',

fontFamily: 'sans-serif',

fontSize: 12,

align: 'bottom',//top,middle,bottom

// verticalAlign: ...,

// lineHeight: ...,

backgroundColor: 'transparent',

borderColor: 'transparent',

borderWidth: 0,

borderRadius: 0,

padding: 0,

shadowColor: 'transparent',

shadowBlur: 0,

shadowOffsetX: 0,

shadowOffsetY: 0,

// width: ...,

// height: ...,

textBorderColor: 'transparent',

textBorderWidth: 0,

textShadowColor: 'transparent',

textShadowBlur: 0,

textShadowOffsetX: 0,

textShadowOffsetY: 0,

}

},

yAxis: {

type: "category",

data: ["报废数", "不良数", "滞留数"],

splitLine: { show: false }, //去除网格线

//坐标轴设置

axisLine: {

show: true,

onZero: true,

//onZeroAxisIndex: ...,

symbolSize: [30, 50],

//轴线设置

lineStyle: {

color: 'rgb(221,221,221)',

width: 1,

type: 'solid',//'solid',dashed,dotted

//shadowBlur: ...,

//shadowColor: ...,

shadowOffsetX: 0,

shadowOffsetY: 0,

//opacity: ...,

},

},

//坐标轴刻度设置

axisTick: {

show: false,

alignWithLabel: false,

interval: 'auto',

inside: false,//坐标轴刻度是从内还是从无外

length: 5,//刻度长度

lineStyle: {

color: 'blue',

width: 3,

type: 'solid',

},

},

//刻度标签设置

axisLabel: {

show: true,

interval: 'auto',

//formatter: '{value}%',

interval: 'auto',

inside: false,//刻度标签朝内还是朝外

margin: 45,//刻度标签与轴线之间的距离。

formatter:function(value,index){return value},

showMinLabel: null,

showMaxLabel: null,

color: '#000',

fontStyle: 'normal',

fontWeight: 'normal',

fontFamily: 'sans-serif',

fontSize: 12,

align: 'bottom',//top,middle,bottom

// verticalAlign: ...,

// lineHeight: ...,

backgroundColor: 'transparent',

borderColor: 'transparent',

borderWidth: 0,

borderRadius: 0,

padding: 0,

shadowColor: 'transparent',

shadowBlur: 0,

shadowOffsetX: 0,

shadowOffsetY: 0,

// width: ...,

// height: ...,

textBorderColor: 'transparent',

textBorderWidth: 0,

textShadowColor: 'transparent',

textShadowBlur: 0,

textShadowOffsetX: 0,

textShadowOffsetY: 0,

}

},

series: [

{

name: "",

type: "bar",

data: progressData,

barWidth: 20,

//顶部数字展示pzr

//配置样式

itemStyle: {

//通常情况下：

normal: {

//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，

                        则柱子颜色循环使用该数组

color: function(params) {

var colorList = [

"rgb(255,49,39)", // 报废 红色

"rgb(255,143,33)", // 不良 橙色

"rgb(127,229,189)", // 滞留 浅绿

];

return colorList[params.dataIndex];

},

label: {

show: true,//是否展示

textStyle: {

fontWeight:'bolder',

fontSize : '12',

fontFamily : '微软雅黑',

},

position:'right'

}

},

//鼠标悬停时：

emphasis: {

shadowBlur: 1,

shadowOffsetX: 0,

shadowColor: "rgba(0, 0, 0, 0.5)"

}

}

}

]

});

}

更多的配置参数请参考官方文档，如有不当的地方欢迎指正。