vue+V-charts实例笔记

最新推荐文章于 2024-08-15 11:16:20 发布

loa_loa

最新推荐文章于 2024-08-15 11:16:20 发布

阅读量1.9w

点赞数 4

分类专栏： vue

本文链接：https://blog.csdn.net/loa_loa/article/details/82351814

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

V-CHART

统计 https://v-charts.js.org/#/

echarts中文文档 http://echarts.baidu.com/option3.html#series-bar.markPoint

Echarts实例文档 http://echarts.baidu.com/echarts2/doc/doc.html#AxisAxislabel

【柱状图】柱子宽度设置、圆角设置barBorderRadius、颜色设置

Html内需要添加Extend 属性:

< :extend="chartExtend">

...

js内data-return内进行参数设置:

chartExtend: {
series: {
//柱子宽度设置barWidth
barWidth: 50,
itemStyle: {
//柱子圆角设置barBorderRadius
emphasis: {
barBorderRadius: 8
},
normal: {
barBorderRadius: 8,
color: function (params){
var colorList = ['#eccb95','#EBAC43','#eccb95'];
return colorList[params.dataIndex];
}
},
//鼠标悬停时： 
emphasis: { 
shadowBlur: 10, 
shadowOffsetX: 0, 
shadowColor: 'rgba(0, 0, 0, 0.5)' 
}
}
}
}

坐标显示不全问题

:grid="grid"

...

//统计图右侧宽度60

this.grid = { right: 60 }

xy轴详情设置在Extend 属性内

this.Extend = {
        series (v) {
          v.forEach(i => {
            i.barWidth = 20//柱状图柱子宽度
          })
          return v
        },
        tooltip (v) {
          v.trigger = 'none'//提示线不显示
          return v
        },
        'xAxis.0.axisLabel.show': false,//x轴标签不显示
        'yAxis.0.axisLabel.show': false,//y轴标签不显示
        'xAxis.0.splitLine.show': false//x轴表格线不显示
      }

设置图表标线与标点

设置属性mark-line、 mark-point：

<ve-line :data="chartData" :mark-line="markLine" :mark-point="markPoint"> </ve-line>

<template>
  <ve-line
    :data="chartData"
    :mark-line="markLine"
    :mark-point="markPoint">
  </ve-line>
</template>

<script>
  // 使用前需先引入对应模块
  // import 'echarts/lib/component/markLine'
  // import 'echarts/lib/component/markPoint'

  export default {
    data () {
      this.markLine = {
        data: [
          {
            name: '平均线',
            type: 'average'
          }
        ]
      }
      this.markPoint = {
        data: [
          {
            name: '最大值',
            type: 'max'
          }  ] }
      return {
        chartData: {
          columns: ['日期', '成本', '利润'],
          rows: [
            { '日期': '1月1日', '成本': 1523, '利润': 1231 },
            { '日期': '1月2日', '成本': 1223, '利润': 2523 },
            { '日期': '1月3日', '成本': 2123, '利润': 1000 },
            { '日期': '1月4日', '成本': 4123, '利润': 3223 }
          ]
        }  } }}
</script>

最大/最小值标记

添加属性：

:mark-point="markPoint"

JS中：

 this.markPoint = {
      data: [
        {
          name: '最大值',
          type: 'max',//最小值是min
          symbolSize: 60,//标记大小
          symbol: 'rect',//标记形状
          symbolOffset: [0, '-50%']//标记位置坐标
        }   
     ]
  }

1.图形

series[i]-bar.markPoint.symbol string

[ default: 'pin' ]

ECharts 提供的标记类型包括 'circle'圆, 'rect'四边形, 'roundRect'圆角四边形, 'triangle'三角形, 'diamond'菱形, 'pin', 'arrow'

2.大小

series[i]-bar.markPoint.symbolSize number, Array, Function

[ default: 50 ]

标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。

3.位置

series[i]-bar.markPoint.symbolOffset Array

[ default: [0, 0] ]

标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。