<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>