vueでのEchartsの使用

インストールの導入

npm install echarts --save

import Echarts from 'echarts'

リング図

.chart-container {
  border-radius: 4px;
  height: 400px;
  background: #fff;
  box-shadow: 0 1px 10px 2px rgba(182, 191, 196, 0.5);
  padding: 20px;
}

data() {
    return { 
      pieCharts: null,     
      pieOption: {
        title: {
          text: '    '
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} 
{b}: {c} ({d}%)"
        },
        series: [
          {
            name: '    ',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            label: {
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            data: [
              { value: 335, name: '  ' },
              { value: 310, name: '  ' },
              { value: 234, name: '  ' },
              { value: 135, name: '  ' }
            ]
          }
        ]
      }    
    }
},
mounted() {
    this.$nextTick(() => {      
      this.pieCharts = Echarts.init(document.getElementById('pieChart'))
      this.pieCharts.setOption(this.pieOption)
      window.addEventListener('resize', this.handleResize)
    })
},
methods: {
    handleResize() {
      this.pieCharts.resize()
    },
},
beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.pieCharts.dispose()
}

折れ線グラフ

data() {
    return {
      lineCharts: null,
      lineOption: {
        title: {
          text: '        '
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['  ', '  ']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1 ', '2 ', '3 ', '4 ', '5 ', '6 ', '7 ', '8 ', '9 ', '10 ', '11 ', '12 ']
        },
        yAxis: {
          type: 'value',
          name: '( )',
          nameLocation: 'start',
          nameTextStyle: {
            fontSize: 14,
            padding: [0, 50, 0, 0],
          }
        },
        series: [
          {
            name: '  ',
            type: 'line',
            stack: '  ',
            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '  ',
            type: 'line',
            stack: '  ',
            data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }      
    }
},
mounted() {
    this.$nextTick(() => {
      this.lineCharts = Echarts.init(document.getElementById('lineChart'))
      this.lineCharts.setOption(this.lineOption)
      window.addEventListener('resize', this.handleResize)
    })
},
methods: {
    handleResize() {
      this.lineCharts.resize()
    },
},
beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.lineCharts.dispose()
}

検索サイト
検索サイト