vue项目中echarts属性总结

<div id="echarts" style="width: 600px;height: 400px;margin-top: 100px;margin-left: 100px"></div>

　　js函数中：

this.EchartsData = this.$echarts.init(document.getElementById('echarts'));

let option1 = {

title: {

text: '我是折线图', //标题

subtext: '我来自福建',//副标题

x:'left', //可设置标题的位置，有left,center,right三个

textStyle: {

color: 'red', //设置标题的颜色 fontSize:'18' //设置标题的字体大小

}

},

tooltip : {

trigger: 'axis', //默认是item,是当鼠标移动到图表上时显示当前节点的信息，如果为axis是显示已这个横坐标范围内的所有节点的信息

　　formatter: "{a} <br/>{b}: {c} ({d}%)"

　　axisPointer: {

　　　　type: 'cross',// 设置鼠标移动到当前节点的会有虚线标识这个节点的横坐标和纵坐 标，还有一个是shadow，显示的当前横坐标范围内的所有节点信息

　　　　label: {

　　　　　　backgroundColor: 'red'//设置当前节点的横坐标与纵坐标的背景颜色，突出当前节 点的坐

　　　　 }

　　}

},

grid: { //设置图标距离四周的距离

　　x:50,

　 y:80,

　 x2:60,

　 y2: 70,

　 containLabel: true

},

legend: {

　　data:['折线一','折线二','折线三','折线四','折线五'],

//这个里面的每一个都自懂绑定series中对应的name的信息，这个是可以用来进行切换是否显示这个信息

　 x: 'center', //用来设定这些图例的位置，有left,center,right

　　textStyle: { //

　　　　color: 'red', //设置legend的颜色

　　　　fontSize:'18' //设置legend的字体大小

　 }，

　　itemHeight:10 //高度

　　itemWidth:10 //宽度

　　x:50,

　　y:50,

　　right:'50',

},

dataZoom: [ //可实现底下多个滚动条，然后可左右滑动

{

　　show: true, //是否显示滚动条

　　realtime: true,

　　start:0, //滚动条的起点位置

　　end: 80, //滚动条的终止位置

　　handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,

　　0.3-8.8,4.4- 8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,

　　8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,

　　24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', // 修改默认的滑块样式

　　handleSize: '50%', //修改挂快的半径

　　handleStyle: {

　　　　color: '#fff', //修改滑块的颜色

　　　　shadowBlur: 3,

　　　　shadowColor: 'rgba(0, 0, 0, 0.6)',

　　　　shadowOffsetX: 2, // x轴向右偏移的阴影

　　　　shadowOffsetY: 2 // y轴向下偏移的阴影

　　},

　　bottom:'0%',

　　height: '40'

　　}

],

toolbox: {

　　left:'right', //设置先出图标操作的图标位置

　　feature: {

　　　　dataZoom: {

　　　　　　yAxisIndex: 'none'

　　},

　　restore: {},

　　saveAsImage: {}

　　}

},

xAxis : [

{

　　type : 'category',

　 boundaryGap : false,//图标的左边是否留白，false不留白，true留白

　　data : ['周一','周二','周三','周四','周五','周六','周日'],

　　axisLine: { 　　

　　　　symbol: ['none', 'arrow'], //设置x轴或y轴箭头 　

　　　　lineStyle: {

　　　　　　color: '#B5B5B5',

　　　　　　width: 2, //这里是为了突出显示加上的 }

　　　　}, //刻度是向内还是向外

　　axisTick:{ inside:true, length:1, },

　 splitLine: {

　　show: true,

　　lineStyle: {

　　type: 'solid',

　　color:'#FCFCFC',//网格颜色

　　}

},

axisLabel:{ //调整x轴的lable //

　　interval:0, //按x轴的长度显示的刻度的个数 例如：本来显示20个刻度，因为x轴端只显示了10个，

　　rotate:0, //实现x轴的刻度的标识实现旋转，

　　textStyle:{

　　fontSize:10,// 让字体变大

　　color:"#B5B5B5"

　 }

},

nameTextStyle: {

　　color: "#B5B5B5",

　　 verticalAlign: "bottom",

　　 fontSize:'10',

　　 padding:[35,50,10,-2] //设置x轴的标题的位置

　　 },

　　boundaryGap : false,

　　　　}

　　 }

],

yAxis : [

{

type : 'value',

name : '高度(ml)',//设置左上角的单位指标

axisLabel: {

formatter: '{value}ml' //设置y轴坐标的单位

},

},

axisLine: { 　

symbol: ['none', 'arrow'], //设置x轴或y轴箭头 　　

lineStyle: {

color: '#B5B5B5',

width: 2, //这里是为了突出显示加上的

} 　　

}, //刻度是向内还是向外

axisTick:{

inside:true,

length:1,

},

splitLine: {

show: true,

lineStyle:{

type: 'solid',

color:'#FCFCFC',//网格颜色

　　}

},

axisLabel:{ //调整x轴的lable

interval:0, //按x轴的长度显示的刻度的个数 例如：本来显示20个刻度，因为x轴端只显示了10个，

rotate:0, //实现x轴的刻度的标识实现旋转，

textStyle:{

fontSize:10,// 让字体变大

color:"#B5B5B5"

}

},

nameTextStyle: {

color: "#B5B5B5",

verticalAlign: "bottom",

fontSize:'10',

padding:[35,50,10,-2] //设置x轴的标题的位置

},

boundaryGap : false,

}

], //label的属性可2放在外面也可以放在里面的series对应的内一个选项里面进行设置

label:{ //修改每个柱子所对应的数据

　　normal:{

　　show: true, //设置数据是否显示

　　position:'inside',//设置显示在位置，有inside,outside,top,bottom,

　　textStyle: {

　　　　fontSize: 15//设置字体大小 //

　　　　color:'red'//设置柱子上面数据的颜色

　　　　}

　　}

},

series : [
{
　　name:'折线一',
　　type:'line',
　　stack: '总量',
　　areaStyle: {
　　　　normal: {
　　　　　　color:'red'//设置填充颜色
　　　　}
　　},
　　label: {
　　　　normal: {
　　　　show: true,
　　　　position:'top',//设置显示在内还是在外
　　　　textStyle: {
　　　　fontSize: 15,//设置字体大小
　　　　color:'red'//设置柱子上面数据的颜色
　　　　}
　　}
},
itemStyle : { //设置折线的颜色
　　normal : {

　　　　color:'#000000',　　//图例颜色
　　　　lineStyle:{

　　　　　　color:'#000000',　　//线条颜色

　　　　　width:1 //线条粗细
　　　　}
　　}
},
data:[120, 132, 101, 134, 90, 230, 210] },

　　

　　在柱状图中的警戒线markLine中属性：

markLine : {
　　symbol:"none", //去掉警戒线最后面的箭头
　　label:{
　　　　position:"start" //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束

　　　　fontSize:18,

　　　　formatter:'69.5%'

　　　　},

　　barGap:'46%' //增加柱间距
　　data : [{
　　　　silent:false, //鼠标悬停事件 true没有，false有
　　　　lineStyle:{ //警戒线的样式 ，虚实 颜色
　　　　type:"solid",
　　　　color:"#FA3934",
　　　　},
　　　　yAxis: 0.75 // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
　　}]
}