基于Echarts的HTML5 Canvas折线图柱状图DEMO演示

今天药忘吃喽~ 2022-04-13 08:58 272阅读 0赞

HTML代码 ：

<div id="barChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"></div>

JavaScript代码 ：

var barChart = {
            title: {
                text: '折柱混合图'
            },
            dataZoom: {
                type:'inside',//slider
                //orient:'horizontal'//vertical
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                //x:'left',
                data:['蒸发量','降水量']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '水量',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                }
            ],
            series: [
                {
                    name:'蒸发量',
                    type:'bar',
                    //stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name:'降水量',
                    type:'bar',
                    //stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                }
            ]
        };
    
        //初始化echarts实例
        var myBarChart = echarts.init(document.getElementById('barChart'));
    
        //使用制定的配置项和数据显示图表
        myBarChart.setOption(barChart);

发表评论取消回复

表情：

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

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

相关阅读

相关 ECharts 同时显示柱状图和折线图

1 实现代码 <body> <div id="main" style="width: 600px;height:400px;"></div>

- 日理万妓/ 2023年10月05日 10:47/ 0 赞/ 27 阅读

相关 echarts仪表盘，柱状图，折线图，趋势图

系列文章目录文章目录系列文章目录前言一、仪表盘二、柱状图三、折线图四、趋势图 -----------------

小鱼儿/ 2023年09月26日 19:58/ 0 赞/ 156 阅读

相关 Echarts：10-7-1 折线图+柱状图

option = { title: { text: '折线图' }, tooltip: {

迈不过友情╰/ 2022年12月12日 13:46/ 0 赞/ 194 阅读

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

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

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

相关 Echarts 柱状图及折线图

效果 ![柱状及折线图表][20210228203149221.png] 功能 1. 防止悬浮框溢出 2. 图例图标宽高度修改 3. 柱状图之间间距设置 4

Dear 丶/ 2022年11月03日 15:24/ 0 赞/ 230 阅读

相关 echarts折线图和柱状图结合绘制

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ5

阳光穿透心脏的1/2处/ 2022年09月11日 07:28/ 0 赞/ 386 阅读

相关基于Echarts的HTML5 Canvas折线图柱状图DEMO演示

HTML代码： <div id="barChart" style="height: 400px;width:600px;background:white;margi

今天药忘吃喽~/ 2022年04月13日 08:58/ 0 赞/ 273 阅读

相关基于Echarts的HTML5 Canvas折线图DEMO演示

HTML代码： <div id="lineChart" style="height: 400px;width:600px;background:white;marg

谁借莪１个温暖的怀抱￠/ 2022年04月13日 08:51/ 0 赞/ 321 阅读

相关通过Html5 Canvas画柱状图

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 离开园子一年多了，现在回来了。问我去哪里了？哈哈，其实哪

Myth丶恋晨/ 2022年01月16日 08:15/ 0 赞/ 435 阅读

相关 Echarts3实例柱状折线图

实现效果 ![70][] 知识点 Y轴垂直标题柱状折线联合使用代码实现 option = { title:

待我称王封你为后i/ 2021年09月16日 07:06/ 0 赞/ 485 阅读