ECharts 实例2

之前做过一个 ECharts 例子；再做一个看一下；


html>
<html>
<head>
    <meta charset="gb2312">
    <title> 多bar 实例title>
    
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
head>
<body>
 
    <div id="jinbars" style="width: 600px;height:400px;">div>
    <script type="text/javascript">
        
        var myChart = echarts.init(document.getElementById('jinbars'));
 
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2050', '2051', '2052'],
                    ['金条', 50, 60, 70],
                    ['金砖', 50, 99, 55],
                    ['金元宝', 60, 95, 40],
                    ['银条', 80, 123, 79]
                ]
            },
            // 默认情况类目轴对应到 dataset 第一列
            xAxis: {type: 'category'},
            // Y 轴，数值轴
            yAxis: {},
            // 声明多个 bar ，默认自动对应到 dataset 的每一列；
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
 
        myChart.setOption(option);
    script>
body>
html>

图表是包含在series里面；之前的例子 series 里面包含一个图表，此例子在series里包含三个图表；并且为了提供数据，使用了dataset属性；

显示如下；

tooltip属性提供了鼠标移上去的提示；

legend 是顶部的三个；可以选中一个、多个、全部；

如果全部不选就是空的；

前面提过type属性是图表类型，上面的是bar；

换一个类型，比如pictorialBar看一下；显示如下；看上去不是需要的；

多数的时候还是在series里只有一个图表；

相关阅读:
开一个羽毛球馆大概需要多少钱？大约15万左右可以搞定！
【工程师整活】Ai-WB1-A1S实现离线语音+APP+天猫精灵控制风扇
Linux环境下的Java（JDBC）连接openGauss数据库实践
Vue教程
中英文说明书丨TRC D-阿卓糖（D-Altrose）
11.11一些资源整理和总结
【2023 高拓迅达笔试题】~ 题目及参考答案
音视频开发常见问题（四）：视频花屏和绿屏
SQL基础理论篇（七）：多表关联的连接算法
C++ Reference: Standard C++ Library reference: C Library: cwchar: ungetwc

原文地址：https://blog.csdn.net/bcbobo21cn/article/details/134543069