vue+V-charts实例笔记

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 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。

例如 [0, '50%'] 就是把自己向上移动了一半的位置，在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

• echarts中自定义提示框内容

        chartExtend:{

         tooltip: {

            trigger: 'item',

            formatter: function(data)

              {

                  return data.name + '<br/>' +data.seriesName + '：'+data.value+'件';

               }

          }

        }

…

来自 <https://www.jianshu.com/p/aa585c304660>

• 颜色设置

 :colors="colors"

…

this.colors = ['#44A1C4','#5CB9DB','#DD74A5','#EBBD70','#7FDFB0']

• 柱状图双坐标轴

在chartSettings 内设置：

    this.chartSettings = {

      showLine: ['金额'],

      axisSite: { right: ['金额'] },//右侧纵坐标数值根据'金额'的数值设置

      yAxisName: ['单位:台', '单位:万元'],//双纵轴上方的单位显示

    }

• 双坐标-设置纵坐标

（参考echarts手册 http://echarts.baidu.com/option.html#yAxis）

添加属性：

:extend="chartExtend"

…

在chartExtend内设置：

 chartExtend: {

        'yAxis.0.min': 0, // yAxis.0：y轴左侧 //设置纵坐标的最小值

        'yAxis.0.max': 5, // 设置纵坐标的最大值

        'yAxis.0.minInterval': 1 // minInterval设置间隔值，1为整数

       'yAxis.1.splitLine.show': false,// yAxis.1： y轴右侧 //不显示值标线

       'yAxis.1.minInterval': 25 // minInterval设置间隔值，1为整数

      }