Echarts 极坐标系下的多色柱状图

最近做了个很奇怪的报表，就记录一下。

效果图：

思路来源于官方实例：https://www.echartsjs.com/examples/zh/editor.html?c=bar-polar-stack

代码如下：

     let xData = ['粥', '小笼包', '生煎', '汤包', '炸酱面']let yData = ['70', '75', '76', '90', '95']let colorList = ['#97e7ff', '#75f5ff', '#00deff', '#0093ff', '#2a5fcf']let visualMapPiecesData = []// visualMap: {//   pieces: [//     { value: 123, label: '123（自定义特殊颜色）', color: 'grey' }//   ]// }for (var i = 0; i < xData.length; i++) {visualMapPiecesData.push({value: yData[i],label: xData[i],color: colorList[i]})}var option = {title: {text: '早餐统计'},angleAxis: {axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitLine: {show: false},clockwise: false},radiusAxis: {type: 'category',data: xData,z: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitLine: {show: false}},polar: {},tooltip: {trigger: 'item',formatter: function (params, ticket, callback) {return params.name + ' : ' + ' (' + params.data + '%)'}},visualMap: {top: 40,x: 'left',orient: 'vertical',textStyle: {color: '#000'},pieces: visualMapPiecesData,outOfRange: {color: '#999'}},series: [{type: 'bar',data: yData,coordinateSystem: 'polar',itemStyle: {normal: {// 定制显示（按顺序）color: function (params) {return colorList[params.dataIndex]}}}}]}this.chartPie = echarts.init(document.getElementById('rightBox1'))this.chartPie.setOption(option)window.addEventListener('resize', () => {this.chartPie.resize()})

Echarts 极坐标系下的多色柱状图相关推荐

ECharts - 极坐标系下的堆叠柱状图
极坐标系下的堆叠柱状图链接:https://pan.baidu.com/s/1tSSDIPOmK9J6lXICJC3N1w 提取码:0ggb
echarts 极坐标系下的堆叠柱状图上下距离及大小跳转方案
博主发现他和其他统计图不一样, 他的上下距离.左右距离.大小是放在polar这个标签里面的,废话不多说,博主就贴重要的代码,你们复制下来试下效果其实就懂了, option = {title: [{te ...
解决Echart极坐标系下的堆叠柱状图各系列有间隔问题
修改Echart同一系列的柱间距离问题描述: 官方案例中的极坐标系下的堆叠柱状图圆心位置有间隔,如下图示: 解决:在坐标系中的一个 'bar' 添加属性barCategoryGap 并将默认值'20 ...
多色柱状图用不同柱体颜色反映数据的差异
多色柱状图它的适用场合是二维数据集(每个数据点包括两个值x和y),可以多个维度需要比较.多色柱状图属于柱状图的一种,利用柱子的高度和不同柱子颜色来反映数据的差异.肉眼对高度差异与色彩差异很敏感,辨识效 ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
R语言ggplot2可视化密度图（density plot）、改变密度图下的填充色实战
R语言ggplot2可视化密度图(density plot).改变密度图下的填充色实战目录 R语言ggplot2可视化密度图(density plot).改变密度图下的填充色实战
图像的旋转和尺度缩放在对数极坐标系下的研究
首先来看一张特殊的同心圆图像及其极坐标变换: 这是我自己在opencv下用cvLogPolar函数做的实验: 极坐标原点选择在同心圆圆心时,同一个圆上的点到圆心的距离相等,所以映射在极坐标中应该是一组 ...
如何用Matlab在极坐标系下绘图并调整极坐标初始角位置
1. 要解决的问题想要将以下几个极坐标点绘制在极坐标系下 theta = [-pi/4 0 pi/4]; r = [50 100 150]; 要求极坐标的中心轴为0度角,向左旋转90度,符号为负,向 ...
平面极坐标系下质点的运动方程
一.平面极坐标系定义 1. 定义在参考系上取一点 OOO 称为极点,由 OOO 点引一有刻度的射线,称之为极轴,即构成极坐标系. 2. 极坐标系质点的位置 PPP 由极径 ρ\rhoρ 和幅角 θ ...

Echarts 极坐标系下的多色柱状图

Echarts 极坐标系下的多色柱状图相关推荐

最新文章

热门文章