Echarts 交错正负轴

本来是要在winfrom 中实现下面图形效果,琢磨很久没有结果

 

 

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-negative2
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script 
交错柱状图(stacked bar chart)是 ECharts 中一种常见的图表类型,它可以同时显示多个类别之间的数据比较,并且将各个类别的数据按照不同的系列进行堆叠展示。 以下是使用 ECharts 创建交错柱状图的基本步骤: 1. 引入 ECharts 库: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> ``` 2. 创建一个 HTML 容器: ```html <div id="chart-container" style="width: 600px; height: 400px;"></div> ``` 3. 初始化图表对象: ```javascript var chart = echarts.init(document.getElementById('chart-container')); ``` 4. 配置图表选项: ```javascript var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['系列1', '系列2', '系列3'] }, xAxis: { type: 'category', data: ['类别1', '类别2', '类别3', '类别4', '类别5'] }, yAxis: { type: 'value' }, series: [ { name: '系列1', type: 'bar', stack: '总量', data: [120, 132, 101, 134, 90] }, { name: '系列2', type: 'bar', stack: '总量', data: [220, 182, 191, 234, 290] }, { name: '系列3', type: 'bar', stack: '总量', data: [150, 232, 201, 154, 190] } ] }; ``` 5. 设置图表配置项并渲染: ```javascript chart.setOption(option); ``` 以上代码中,通过配置项 `series` 的每个系列的 `stack` 属性为相同的值,从而使得柱状图能够堆叠显示。 你可以根据自己的需求修改数据和样式来创建一个交错柱状图。希望这能帮到你!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值