Use of Vue Echarts on 17 July 2020

Bar

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String.default: 'chart'
    },
    width: {
      type: String.default: '100%'
    },
    height: {
      type: String.default: '300px'}},data() {
    return {
      chart: null}},mounted() {
    this.$nextTick(() = > {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        tooltip: {
          trigger: 'axis'.axisPointer: { // Axis indicator. Axis trigger works
            type: 'shadow' / / the default value is linear, optional: 'the line' | 'shadow'}},grid: {
          top: 10.left: '2%'.right: '2%'.bottom: '3%'.containLabel: true
        },
        xAxis: [{
          type: 'category'.data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun'].axisTick: {
            alignWithLabel: true}}].yAxis: [{
          type: 'value'.axisTick: {
            show: false}}].series: [{
          name: 'pageA'.type: 'bar'.stack: 'vistors'.barWidth: '60%'.data: [79.52.200.334.390.330.220],
          animationDuration
        }, {
          name: 'pageB'.type: 'bar'.stack: 'vistors'.barWidth: '60%'.data: [80.52.200.334.390.330.220],
          animationDuration
        }, {
          name: 'pageC'.type: 'bar'.stack: 'vistors'.barWidth: '60%'.data: [30.52.200.334.390.330.220],
          animationDuration
        }]
      })
    }
  }
}
</script>
Copy the code

pie

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String.default: 'chart'
    },
    width: {
      type: String.default: '100%'
    },
    height: {
      type: String.default: '300px'}},data() {
    return {
      chart: null}},mounted() {
    this.$nextTick(() = > {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        tooltip: {
          trigger: 'item'.formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center'.bottom: '10'.data: ['Industries'.'Technology'.'Forex'.'Gold'.'Forecasts']},series: [{name: 'WEEKLY WRITE ARTICLES'.type: 'pie'.roseType: 'radius'.radius: [15.95].center: ['50%'.'38%'].data: [{value: 320.name: 'Industries' },
              { value: 240.name: 'Technology' },
              { value: 149.name: 'Forex' },
              { value: 100.name: 'Gold' },
              { value: 59.name: 'Forecasts'}].animationEasing: 'cubicInOut'.animationDuration: 2600}]})}}</script>
Copy the code

radar

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String.default: 'chart'
    },
    width: {
      type: String.default: '100%'
    },
    height: {
      type: String.default: '300px'}},data() {
    return {
      chart: null}},mounted() {
    this.$nextTick(() = > {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        tooltip: {
          trigger: 'axis'.axisPointer: { // Axis indicator. Axis trigger works
            type: 'shadow' / / the default value is linear, optional: 'the line' | 'shadow'}},radar: {
          radius: '66%'.center: ['50%'.'42%'].splitNumber: 8.splitArea: {
            areaStyle: {
              color: 'rgba (127,95,132, 3)'.opacity: 1.shadowBlur: 45.shadowColor: 'rgba(0,0,0,.5)'.shadowOffsetX: 0.shadowOffsetY: 15}},indicator: [{name: 'Sales'.max: 10000 },
            { name: 'Administration'.max: 20000 },
            { name: 'Information Technology'.max: 20000 },
            { name: 'Customer Support'.max: 20000 },
            { name: 'Development'.max: 20000 },
            { name: 'Marketing'.max: 20000}},legend: {
          left: 'center'.bottom: '10'.data: ['Allocated Budget'.'Expected Spending'.'Actual Spending']},series: [{
          type: 'radar'.symbolSize: 0.areaStyle: {
            normal: {
              shadowBlur: 13.shadowColor: 'rgba(0,0,0,.2)'.shadowOffsetX: 0.shadowOffsetY: 10.opacity: 1}},data: [{value: [5000.7000.12000.11000.15000.14000].name: 'Allocated Budget'
            },
            {
              value: [4000.9000.15000.15000.13000.11000].name: 'Expected Spending'
            },
            {
              value: [5500.11000.12000.15000.12000.12000].name: 'Actual Spending'}].animationDuration: animationDuration
        }]
      })
    }
  }
}
</script>
Copy the code