v-charts图表方法

//引入Vchart
import VeRing from 'v-charts/lib/ring.common.js'
Vue.component('VeRing', VeRing)

<template>
  <div>
    <navbar :title="title"></navbar>
    <div>
      <ve-ring
        :data="chartData"
        :extend="chartExtend"
        :settings="chartSettings"
      ></ve-ring>
    </div>
  </div>
</template>
<script>
import navbar from '@/components/navbar.vue'
export default {
  name: '',
  components: {
    navbar
  },
  props: {},
  data() {
    this.chartExtend = {
      series: {
        radius: ['50%', '70%'],
        label: {
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        }
      },
      legend: {
        data: []
      },
      color: ['#ffa768', '#3992e6', '#42c0c8', '#eceff2']
    }
    this.chartSettings = {
      itemStyle: {
        //配置一些样式
        color: seriesIndex => {
          if (seriesIndex.dataIndex === 0) {
            return {
              type: 'linear',
              x: 0, //X轴起始坐标
              y: 0, //Y轴起始坐标
              x2: 1, //X轴终点坐标
              y2: 1, //Y轴终点坐标
              colorStops: [
                {
                  offset: 0,
                  color: '#ffe791' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#ff985e' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          } else if (seriesIndex.dataIndex === 1) {
            return {
              type: 'linear',
              x: 0, //X轴起始坐标
              y: 0, //Y轴起始坐标
              x2: 1, //X轴终点坐标
              y2: 1, //Y轴终点坐标
              colorStops: [
                {
                  offset: 0,
                  color: '#3a88db' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#36aaff' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          } else if (seriesIndex.dataIndex === 2) {
            return {
              type: 'linear',
              x: 0, //X轴起始坐标
              y: 0, //Y轴起始坐标
              x2: 1, //X轴终点坐标
              y2: 1, //Y轴终点坐标
              colorStops: [
                {
                  offset: 0,
                  color: '#3dc3c4' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#44bec9' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          } else {
            return {
              type: 'linear',
              x: 0, //X轴起始坐标
              y: 0, //Y轴起始坐标
              x2: 1, //X轴终点坐标
              y2: 1, //Y轴终点坐标
              colorStops: [
                {
                  offset: 0,
                  color: '#f2f7fb' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#f2f7fb' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        }
      }
    }
    return {
      title: '图表',
      chartData: {
        columns: ['日期', '访问用户'],
        rows: [
          { 日期: '药品', 访问用户: 18 },
          { 日期: '标本', 访问用户: 32 },
          { 日期: '病人', 访问用户: 25 },
          { 日期: '其他', 访问用户: 25 }
        ]
      },
      chartColors: ['#333', '#666']
    }
  },
  computed: {},
  methods: {}
}
</script>

<style scoped lang="less"></style>