Vue使用Echarts

v-charts

  • 此文章持续更新,每个配置都会以例子来讲解,对比v-charts,vue-charts和原生echarts分别描述。

v-charts是一个Echarts的封包,饿了么官方前端团队开发的Echarts基于Vue的图表组件。

v-charts的封装理念是将部分属性暴露在组件属性上,同时也可以通过哦extend属性设置对应属性。

echarts最重要的属性label,tooltip,grid,legend,series等怎么在v-charts组件中配置

  • 以三个图表的为例:

<ve-bar
	 ref='contactsRank'
	 :data='contactsRank.data'
	 :legend-visible='false'
	 :extend='contactsRank.extend'
	 height='280px'/>
//配置
contactsRank :{
  extend: {
    title:{
      text:'常用联系人和消息记录',//条形图标题
      x:'center',//条形图标题预设的定位
      bottom:0 //同样可以使用left、right、top来调整位置
    },
    tooltip:{
      formatter:"{b}:
QQ:{c0}
微信:{c1}"
//hover的时候提示框模板配置 }, grid:{ left:0, right:50, containLabel: true }, xAxis:{ axisLine:{ show:false }, axisLabel:{ showMinLabel:false } }, series: { stack:['QQ','微信'], label: { normal: { show:true, // position: 'insideRight' } }, }, }, data: { columns: ['label','QQ','微信'], rows:[ { 'label': '姘头', 'QQ': 8530 ,'微信':1561 }, { 'label': '张三', 'QQ': 1393 ,'微信':620}, { 'label': '李四', 'QQ': 3530 ,'微信':1300}, { 'label': '王五', 'QQ': 2923 ,'微信':1589}, { 'label': '刘二', 'QQ': 1723 ,'微信':550}, { 'label': '马大哈', 'QQ': 3792 ,'微信':1880}, ] } },
  • 效果
    Vue使用Echarts_第1张图片

详细介绍

grid

  • grid 是坐标系图表的配置项,基本定位属性控制图表在容器中显示时相对容器边界的距离,如上面的配置。
  • left和right都接受负值,以此为0刻度为中心,可以做正负交替坐标系;
  • 同时,以此控制坐标轴数值过大时容易被容器边界隐藏的问题。

如下,我将right的值改小:

right:10
Vue使用Echarts_第2张图片

formatter

  • 模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

  • 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

  • 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

  • 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

  • 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

formatter示例

  • 以我上面的数据来对比,{c}代表数据值,因为我设置了堆叠,一项有多个数据,所以,可以给c跟上下标来显示多个数据,c0就代表QQ,c1就代表微信。

  • formatter还支持传递函数:

 tooltip:{
   formatter:function(item){
   	console.log('params',item)
   	return 'hahaha'
   }
 },

Vue使用Echarts_第3张图片
Vue使用Echarts_第4张图片
以上打印结果在鼠标每一次hover图表上方数据中的时候都会触发一次,所以,即使在一个数据里反复移动鼠标也会不断触发。
如上图:
marker就是渲染的模板,默认会返回显示数据颜色 + [条目名 + 数据值,条目名 + 数据值],如下:
Vue使用Echarts_第5张图片
以此可以达到定制tooltip提示的目的。

legend

  • 控制图表容器内,有canvas或者svg渲染出的表格的边界位置,如果你把图例(legend)隐藏了,绘制的图表默认是不会自己移动位置来填补原来图例的位置。

组件代码

 <ve-ring
   ref='sourcerecords'
   :data='sourceRecords.data'
   :legend-visible='false'
   :extend='sourceRecords.extend'
   height='250px'/>

:legend-visible = 'false 为例是个分包的属性,同样可以通过在extend里添加 legend属性进行配置:

extend:{
  legend: {
	show: false
  }
}

配置代码

sourceRecords: {
  extend: {
    series: {
      center: ["50%", "50%"],//渲染图表相对容器内容
      label: {
        normal: {
          formatter: "{b}({d}%)",
        },
      },
    },
    legend: {
      show: false,
      //type:'plain', //或 'scroll'设置图例数量过多之后为一行,分别树横和竖,超出的会出现分页箭头
      //top: 20, //如果你设置show:true,那么可以显示图例,同时可以通过 定位属性控制 图例显示的位置上
    }
  },
  data: {
    columns: ['label', 'count'],
    rows: [
      { 'label': '地理位置', 'count': 1393 },
      { 'label': '短信记录', 'count': 3530 },
      { 'label': '通话记录', 'count': 2923 },
      { 'label': '浏览器记录', 'count': 1723 },
      { 'label': '实时通讯记录', 'count': 3792 },
    ]
  }
},

如果我去掉series的属性值:center:['50%','50%']:
Vue使用Echarts_第6张图片
如下图我的legend设置:

legend:{
  type: 'scroll', //竖向
  orient: 'vertical',
  left: 0,
  top: 35,
  bottom: 20,
},

Vue使用Echarts_第7张图片
当bottom设置为300时,图例显示有限,出现分页箭头
Vue使用Echarts_第8张图片

你可能感兴趣的:(前端学习笔记,echarts,echarts,vue-echarts,v-charts)