使用Echarts实现动态柱状图

分手后的思念是犯贱 2022-11-21 04:24 587阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70][]

代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>第一个 ECharts 实例</title>
        
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '第一个 ECharts 实例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70]: /images/20221120/4e9ba377bbad4fc59b7b53f4946adcba.png

发表评论取消回复

表情：

评论列表（有 0 条评论，587人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 实现横向柱状图

1 原始效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Dear 丶/ 2023年10月05日 16:50/ 0 赞/ 104 阅读

相关 ECharts 实现重叠柱状图

1 使用详解（1）series.z 说明：折线图组件的所有图形的 z 值。控制图形的前后顺序。 z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先

女爷i/ 2023年10月05日 11:32/ 0 赞/ 187 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 427 阅读

相关使用Echarts实现动态柱状图

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

分手后的思念是犯贱/ 2022年11月21日 04:24/ 0 赞/ 588 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 753 阅读

相关 Echarts-横向柱状图实现

╰半橙微兮°/ 2022年11月06日 14:52/ 0 赞/ 389 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 467 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 452 阅读

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 833 阅读

相关 ECharts之柱状图

效果图 ![在这里插入图片描述][20190725104919483.gif] 背景图片 ![20190725170845879.png][] 下载EChar

旧城等待，/ 2021年09月29日 22:48/ 0 赞/ 957 阅读