import { Pieces } from "../@share/pieces"; /** * 柱形图 * xy 轴可交换 * 柱体默认颜色,亦可设置区间颜色 * 栅格分度数配置 * 数值显示位置配置 inside | top */ export class ColumnChart { TYPE_NORMAL = 'normal'; // normal | special TYPE_SPECIAL = 'special'; // normal | special timer = null; colorRange = Pieces.getRandomRange(); max = 100; min = 0; week = [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]; constructor(myChart) { this.currentType = this.TYPE_NORMAL; // 绘制图表 myChart.setOption(this.getOptions(this)); this.randomData(myChart); // 添加按钮切换 xy 轴 this.addButton(myChart); } /** * 添加 button,用于切换 xy 轴显示 * @param myChart */ addButton(myChart) { let self = this; $('body').append(`<button class="btn">切换xy</button>`); $('.btn').on('click', (e) => { this.currentType = this.currentType === this.TYPE_NORMAL ? this.TYPE_SPECIAL : this.TYPE_NORMAL; myChart.clear(); clearInterval(self.timer); myChart.setOption(self.getOptions(self)); self.randomData(myChart); }); } /** * 随机绘图数据 * @param myChart */ randomData(myChart) { let self = this; self.timer = setInterval(() => { myChart.setOption({ series: [ { data: self.getData(self), } ] }); }, 1000); } /** * 获取配置项信息 * @param self * @returns {{yAxis, xAxis, series: [{data: *, color: string, type: string}]}} */ getOptions(self) { return { xAxis: self.getXOptions(self), yAxis: self.getYOptions(self), series: [ { data: self.getData(self), type: 'bar', // color: Pieces.getColor(), label: { // 文字位置 show: true, position: 'inside', // inside | top }, } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { let data =params[0]; return data['axisValue'] + ' : ' + data.value + ' (' + data.color + ')'; }, renderMode: 'richText', padding: [ 5, 10 ], }, }; } /** * 根据类型获取x 轴配置项 * @param self * @returns {{type: string}|{min: number, max: number, type: string}} */ getXOptions(self) { return self.currentType === self.TYPE_NORMAL ? self.getCategoryAxis(self) : self.getValueAxis(self); } /** * 根据类型获取 y 轴 配置信息 * @param self * @returns {{min: number, max: number, type: string}|{type: string}} */ getYOptions(self) { return self.currentType === self.TYPE_NORMAL ? self.getValueAxis(self) : self.getCategoryAxis(self); } /** * 获取类目轴配置 */ getCategoryAxis(self) { return { type: 'category', data: self.week, }; } /** * 获取数值轴配置 */ getValueAxis(self) { return { splitLine: { show: false, // 是否显示栅格 }, interval: 25, // 强制设置坐标轴分割间隔。 type: 'value', max: self.max, min: self.min, axisLine: { // 坐标轴轴线相关设置。 show: true, }, axisTick: { // 坐标轴刻度相关设置。 show: true, }, }; } /** * 获取数据 * @param self * @returns {*[]} */ getData(self) { let data = []; for (let i = 0; i < self.week.length; i++) { let num = Pieces.getRandomNumberByCount(1, 100); // [1,3,4] 数值或 [1, {value: 3, itemStyle{}}, 4] 配置柱子样式 data.push({ value: num, itemStyle: { color: self.getColorByValue(self, num), } }); } return data; } /** * 根据值获取对应区间色值 * @param self * @param num * @returns {string} */ getColorByValue(self, num) { let total = self.max - self.min; let p = num / total; let range = self.colorRange; let color = ''; for(let i = range.length - 1;i >= 0; i--) { if (p >= range[i][0]) { color = range[i][1]; break; } } return color ? color : '#000'; } }
柱形图大致配置跟折线图类似,这里只记录个实现代码
demo:https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color