echart圖-柱狀圖（簡單的資料集）
阿新 • • 發佈：2021-07-10
import * as echarts from 'echarts';
var app = {};
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
color:['#4472C5','#ED7C30','#ED7C30'], //設定每個legend的顏色（這裡三個顏色對應三個legend）
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
itemStyle: { //設定每個柱條的顏色
normal: {
//這裡是重點
color: function(params) {
//注意，如果顏色太少的話，後面顏色不會自動迴圈，最好多定義幾個顏色
var colorList = ['rgb(127,154,229)','rgb(127,154,229)','rgb(127,154,229)','rgb(127,154,229)'];
return colorList[params.dataIndex]
}
}
}
},
{type: 'bar'},
{type: 'bar'},
]
};
option && myChart.setOption(option);