import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '排行榜TOP10'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show: false
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
splitLine: { show: false },
axisLine: {
show: false
},
axisTick: {
show: false
},
offset: 50,
nameTextStyle: {
fontSize: 15
}
},
dataset: {
dimensions: ['product', 'aac'],
source: [
{ product: 'Matcha Latte', aac: 43.3 },
{ product: 'Milk Tea', aac: 83.1 },
{ product: 'Cheese Cocoa', aac: 86.4 },
{ product: 'Walnut Brownie', aac: 72.4 }
]
},
series: [
{
type: 'bar',
barWidth: 14,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]),
borderRadius: 14
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
},
label: {
show: true,
position: 'left',
formatter: '{@aac}',
width: 50,
color: 'blue'
}
}
]
};
option && myChart.setOption(option);