vue项目中echarts属性总结

摘要:
在js函数中:this。EchartsData=这个$eccharts.init(document.getElementById('eccharts'));Letoption1={title:{text:‘我是一个折线图’,//title潜台词:‘我来自
<div   style=" 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',

       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',

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',  //线条颜色

     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,分为最大,最小,平均值
  }]
}



免责声明:文章转载自《vue项目中echarts属性总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇linux的基本操作(mysql 的基本操作)Win7+VS2005编译Qt4.7.3+phonon(需要安装新版本Windows SDK)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

[javascript] js websocket断线重连库ReconnectingWebSocket

websocket在连接的时候 , 受网络影响 或者长时间没有通信被服务端关闭 , 都需要断线重连机制 自己写断线重连比较麻烦 , 可以使用这个js库 ReconnectingWebSocket.js  https://github.com/joewalnes/reconnecting-websocket/    直接下载min文件 , 引入就可以 使用的...

Vue之项目搭建

  一、Vue自动化工具的安装 nvm:nodejs 版本管理工具。 也就是说:一个 nvm 可以管理很多 node 版本和 npm 版本。 nodejs:在项目开发时的所需要的代码库 npm:nodejs 包管理工具。 在安装的 nodejs 的时候,npm 也会跟着一起安装,它是包管理工具。 npm 管理 nodejs 中的第三方插件   1,安装nv...

Vue脚手架的elementui表格里面嵌套输入框

<el-table :data="ruleLanguage" border style=" 100%" highlight-current-row @selection-change="handleSelectionChange" @select-all="selectAll" @row-dblclick="doubleClick"...

vue中使用keepAlive(缓存页面&amp;amp;记忆上次浏览位置)及使用后生命周期的改变

以下部分内容转自博客(另外配有自己见解):https://www.cnblogs.com/nokelong/p/8116631.html 使用keepAlive缓存页面,一可以减少服务器请求次数,二则可以在用户返回上一页后记忆到上次浏览位置(ios端微信浏览器不适用,不兼容,需要另行配置:见例子(1)) keep-alive的介绍如下: 1,把切换出去的组...

VSCode 启动 Vue 项目 npm install 报错

1. 报错后,查看了版本。 查看node版本:node -v 查看npm版本:npm -v 查看Augular版本:ng --version 2. 感觉 Augular CLI版本太低,使用以下方法升级到最新版本: 》 npm uninstall -g @angular/cli 》 npm cache verify (或 npm cache clean -...

Vue最简单的实现网页Live2D看板娘

Live2D看板娘 前言 二、使用步骤 1.引入 2.设置样式 结尾(后续更新更强的配置看板娘~) 前言 最近想给自己的网页添点新花样,然后就想到了别人的网站都有一些看板娘的玩意儿,看着很舒服,鉴于自己也没玩过,就鼓捣了一会儿。发现实现的模型还挺多。我这里呢,就简化一下,弄一个最简单在vue中的教程。 二、使用步骤 1.引入 在inde...