天天看點

Echarts資料顯示千分符

<template>
  <div>
    <div id="lineChart" style="width:850px;height:350px;"></div>
    <div id="doughnutChart" style="width:850px;height:350px;"></div>
  </div>
</template>

<script>
let eCharts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/chart/pie')
require('echarts/lib/component/tooltip')

export default {
  name: 'thousandsEcharts',
  mounted () {
    this.initLineChart()
    this.initDoughnutChart()
  },
  methods: {
    initLineChart () {
      let myChart = eCharts.init(document.getElementById('lineChart'))
      myChart.setOption({
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: ['2020.05.01', '2020.05.02', '2020.05.03', '2020.05.04', '2020.05.05', '2020.05.06', '2020.05.07']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: function (p) {
                let value = ''
                if (p.value > 0) {
                  value = p.value
                  if (value > 999) {
                    // 數值加千分号
                    let parts = value.toString().split('.')
                    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                    value = parts.join('.')
                  }
                }
                return value
              }
            }
          },
          data: [1234, 999, 2341, 4321, 333, 3241, 666],
          type: 'line'
        }]
      })
    },
    initDoughnutChart () {
      let myChart = eCharts.init(document.getElementById('doughnutChart'))
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function (p) {
            let value = p.value
            if (value > 999) {
              let parts = value.toString().split('.')
              parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
              value = parts.join('.')
            }
            let res = p.seriesName + '<br/>' + p.name + ' : ' + value + ' (' + p.percent + '%)'
            return res
          }
          // formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['直接通路', '郵件營銷', '聯盟廣告', '視訊廣告', '搜尋引擎']
        },
        series: [
          {
            name: '通路來源',
            type: 'pie',
            radius: ['50%', '70%'],
            data: [
              {value: 335, name: '直接通路'},
              {value: 310, name: '郵件營銷'},
              {value: 234, name: '聯盟廣告'},
              {value: 135, name: '視訊廣告'},
              {value: 1548, name: '搜尋引擎'}
            ]
          }
        ]
      })
    }
  }
}
</script>
           
Echarts資料顯示千分符

繼續閱讀