柱柱状图实现

最新推荐文章于 2023-04-05 09:41:46 发布

暮辰邪

最新推荐文章于 2023-04-05 09:41:46 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

分类专栏：总结

本文链接：https://blog.youkuaiyun.com/weixin_37623470/article/details/96374127

总结专栏收录该内容

26 篇文章

订阅专栏

本文展示了一个使用ECharts进行数据可视化的HTML示例页面。该示例通过加载多个ECharts扩展库，实现了一组产品销售数据的条形图展示。通过对数据集中的产品名称与销售额映射到图表上，清晰地呈现了各产品的销售情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height:400px;width:512px;; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var option = {
    dataset: {
        source: [
            ['amount', 'product'],
            [58212, 'Matcha Latte'],
            [78254, 'Milk Tea'],
            [ 41032, 'Cheese Cocoa'],
            [ 12755, 'Cheese Brownie'],
            [ 20145, 'Matcha Cocoa'],
            [ 79146, 'Tea'],
            [ 91852, 'Orange Juice'],
            [ 101852, 'Lemon Juice'],
            [ 20112, 'Walnut Brownie']
        ]
    },
    grid: {containLabel: true},
    xAxis: {name: 'amount'},
    yAxis: {type: 'category'},
   
    series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>