v-chart 图表曲线图（双曲线）

近期有需求做图表，这里且做记录：

参考资料：v-chart 官网：v-charts

vue 相关的组件封装这里用了v-chart里面大多数属性是echart图表相同的。

以下是曲线图的标签使用方式：

<ve-line ref="lineChart" :data="lineData" :colors="colors" :settings="lineSettings" :extend="extendLine" :legend-visible="false" width="100%" height="100%"></ve-line>

 标签属性说明：

1.settings 配置项；

2.extend也可以理解为配置项，

官网解说：

为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置， extend为对象类型，对象内的属性可以是函数，也可以对象，也可以是其他类型的值

• 当属性为函数时，设置的是函数的返回值
• 当属性为对象时，如果在options中对应的属性为对象(eg: tooltip)或包含对象的数组(eg: series)， 对应的配置会被合并，否则将直接覆盖对应的配置

自己在实践中体会吧，个人感觉就是settings的一个扩展配置。

3.colors：当多条线设置不同颜色的时候就会用到该属性；

4.legend-visible - 是否展示图例组件 legend

<ve-line ref="lineChart" :data="lineData" :colors="colors" :settings="lineSettings" :extend="extendLine" :legend-visible="false" width="100%" height="100%"></ve-line>

export default {

  data() {

    this.colors = ['#03C8D5','#40A9F5']; 
    this.extendLine= {
        grid:{
          left:'-4%',
          top:'20%',
          right:"3.6%"
        },
        legend:{
          bottom:'26',
          icon:"circle",
          itemWidth:6,
          itemHeight:6,
          textStyle: {
            color: "rgba(255,255,255,0.8)",
            fontSize:11
          },
         
          
        },
        yAxis: {
          name: "租户（人数）",
          nameTextStyle: {
            color: "rgba(255, 255, 255, 0.6)",
            fontSize:"10",
            align:'center',

          },
          //是否显示y轴线条
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3B63A0', // y轴的颜色 
            },
          },
          // 纵坐标网格线设置，同理横坐标
          splitLine: {
            show: false,
          },
          // 线条位置
          position: "left",
          min: 0,
          max: 200,
          axisLabel:{
            textStyle: {
              color: "rgba(255, 255, 255, 0.6)",//Y轴内容文字颜色
              fontSize:"10",
              align:'right',
            },
          }
          
        },
        xAxis: {
          boundaryGap:false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3B63A0',
            },
          },
          axisLabel:{
            interval:0,
            textStyle: {
              color: "rgba(255, 255, 255, 0.8)",
              fontSize:"10",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series(v) {
          v.forEach(i => {
            i.showSymbol= false,
            i.barWidth = 20;
            if(i.name == "注册租户"){
              i.areaStyle= {// new this.$echarts.graphic.LinearGradient(0,0,0,1,[{}])
                normal:{
                  // color:"rgba(3,200,213,0.32)",
                  color: {
                      colorStops: [{
                          offset: 0, color: 'rgba(3,200,213,0.32)' // 0% 处的颜色
                      }, {
                          offset: 1, color: 'rgba(3,200,213,0)' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
                }
              }
            }else{
              i.areaStyle= {// new this.$echarts.graphic.LinearGradient(0,0,0,1,[{}])
               normal:{
                //  color:"rgba(64,169,245,0.48)",
                  color: {
                    colorStops: [{
                        offset: 0, color: 'rgba(107,222,255,0.48)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(107,222,255,0.14)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
               }
              }
            }
            
          })
          return v
        },
        tooltip: {
          backgroundColor:'#0C437E',
          boxShadow: '0px 5px 7px 0px rgba(0,0,0,0.1)',
          padding:[2,12],
          textStyle:{
            color:'#ffffff',
            fontSize:'12px',
            lineHeight:24
          },
          extraCssText: 'box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.1)'
        },
       
        
      };
     return {
        lineSettings:{
            labelMap: {
              'date': '时间',
              'num': '注册租户',
              'num2':'流失租户'
            },
            area: true,
        },
        //双曲线图数据
       lineData: {
        columns: ["date", "num","num2"],//第一个参数为维度(横轴，例如时间)，其他参数为指标
        rows: [
          {
              "date": "08-31",
              "num": 50,
              "num2":80 
          },
          {
              "date": "09-01",
              "num": 60,
              "num2": 130
          },
          {
              "date": "09-02",
              "num": 68,
              "num2": 80
          },
          {
              "date": "09-03",
              "num": 110,
              "num2": 180
          },
          {
              "date": "09-04",
              "num": 50,
              "num2": 130
          },
          {
              "date": "09-05",
              "num": 60,
              "num2": 60
          },
          {
              "date": "09-06",
              "num": 80,
              "num2": 90
          }
        ],
      },
    }

  }
}