Echarts角锥柱形图

开发中遇到要求需要展示锥形柱状图，类似如下效果

我知道Highcharts是有角锥图的配置文档的，如果项目中使用的是Highcharts，那么就可以直接配置了
Highcharts配置文档

但是我目前项目都是用的Echarts，如果Highcharts可以做到，那么Echarts也肯定是可以的。
翻阅了一天的配置项文档后发现
官方文档：Echarts柱状图有一种类型是象形柱图，象形柱图是可以设置各种具象图形元素的柱状图，象形柱图可以被想象为：它首先是个柱状图，但是柱状图的柱子并不显示。这些柱子我们称为『基准柱（reference bar）』，根据基准柱来定位和显示各种象形图形（包括图片）。

解决

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'pictorialBar', // 象形柱图symbol: 'triangle', // 三角形color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#e877a9'}, {offset: 1, color: 'rgba(232, 119, 169, 0.31)'}]},}]
};

Echarts角锥柱形图相关推荐

vue+elementui中使用echarts给柱形图添加背景色
vue+elementui中使用echarts给柱形图添加背景色首先使用npm安装echarts npm install echarts --save //or(或者使用) cnpm install ...
echarts设置柱形图宽度最大宽度最小宽度
一般来说不需要设置柱形图宽度,不过如果实在是要设置也只能硬着头皮设置了. 修改series对应数组里面的barWidth属性即可设置柱形图宽度,当然还有最小宽,最大宽则是barMinWidth和bar ...
用echarts实现柱形图、折线图、堆积图的闪烁效果
首先,echarts本身没有闪烁的功能供大家直接使用,下面我们将用最简单的方法去实现图表的闪烁! echarts图表的实现是通过对option进行设置,然后myChart.setOption(opti ...
echarts 3D柱形图
3D echarts柱形图 var myChart = echarts.init(document.getElementById(id));option = {color: ['#bb0004', ' ...
vue中使用echarts绘柱形图+折线图
一.完成后效果图二..vue文件完整代码 <template><divid="myMaxbar":style ...
Echarts 3D柱形图和3D堆叠柱形图实现
[Echarts]3D双柱形图.堆叠柱形图实现实现目标展示 1.双柱图实现步骤内容分析代码实现 2.堆叠图实现步骤内容分析代码实现实现目标展示 1.双柱图实现步骤内容分析此处采用的双柱 ...
echarts百分比柱形图
参考网站: https://echarts.baidu.com/ <!DOCTYPE html> <html style="height: 100%">&l ...
数据可视化ECharts:定制柱形图
- 官网找到类似实例, 适当分析,并且引入到HTML页面中 - 根据需求定制图表需求1: 修改图形大小 grid // 图标位置grid: {top: "10%",left: ...
Echarts双向柱形图
样式图: 代码: <template><div id="lineChart" style="width:100%;height:100%;"& ...

Echarts角锥柱形图

解决

Echarts角锥柱形图相关推荐

最新文章

热门文章