echarts画出特殊形状的柱状图

通常echarts画出的柱状图都是矩形,怎样用echarts画出特殊形状的柱状图呢?

例如:


代码配置参数如下:

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: 'path://M47.5,58.5h-25h-12c6.6,0,12-5.4,12-12v-35h25v35c0,6.6,5.4,12,12,12H47.5z',
        symbolClip: true,
    }]
};

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要画横向区间柱状图,可以使用Echarts中的自定义系列图表,具体步骤如下: 1. 首先需要引入Echarts库和相关的JS文件。 2. 创建一个div容器,用于显示图表。 3. 定义一个option对象,用于配置图表的各种属性,包括x轴、y轴、数据等。 4. 在option中定义一个自定义系列,type为'custom',并在其中定义一个renderItem函数,用于绘制柱状图。 5. 在renderItem函数中,使用Echarts提供的API绘制横向区间柱状图,包括柱子的位置、大小、颜色等属性。 6. 最后将option对象传入Echarts的init方法中,即可显示横向区间柱状图。 具体代码实现可以参考以下范例: ``` // 引入Echarts库和相关JS文件 import echarts from 'echarts'; import 'echarts/lib/chart/custom'; // 创建一个div容器,用于显示图表 let chart = document.getElementById('chart'); // 定义一个option对象,用于配置图表的各种属性 let option = { xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, series: [{ type: 'custom', renderItem: function(params, api) { // 绘制柱状图 let yValue = api.value(2); let start = api.coord([api.value(0), yValue]); let end = api.coord([api.value(1), yValue]); let height = api.size([0, 1])[1] * 0.6; return { type: 'rect', shape: echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }), style: api.style({ fill: echarts.color.lift(params.color), stroke: '#000' }) }; }, data: [ [10, 20, 0], [30, 40, 1], [50, 60, 2], [70, 80, 3], [90, 100, 4] ] }] }; // 将option对象传入Echarts的init方法中,即可显示横向区间柱状图 let myChart = echarts.init(chart); myChart.setOption(option); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值