Echarts 柱状图组

通过Echarts可以实现柱状图组,如下图:是一个学生三次模考成绩对比结果

源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById(‘main‘));

        // 指定图表的配置项和数据
        var option = {
            title : {
                text: ‘模考分数对比‘,
                subtext: ‘纯属虚构‘
            },
            tooltip : {
                trigger: ‘axis‘
            },
            legend: {
                data:[‘一模‘,‘二模‘,‘三模‘]
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: [‘line‘, ‘bar‘]},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : ‘category‘,
                    data : [‘数学‘,‘语文‘,‘英语‘,‘综合‘]
                }
            ],
            yAxis : [
                {
                    type : ‘value‘
                }
            ],
            series : [
                {
                    name:‘一模‘,
                    type:‘bar‘,
                    data:[78, 80, 87, 93],
                    color:‘#CC0066‘
                },
                {
                    name:‘二模‘,
                    type:‘bar‘,
                    data:[90, 77, 62, 76],
                    color:‘#009999‘
                },
                {
                    name:‘三模‘,
                    type:‘bar‘,
                    data:[91, 78, 87, 89],
                    color:‘#FFCC33‘
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

上图是一个横坐标为种类,纵坐标为值的图形,如果需要将坐标轴互换,只需要xAixs与yAixs中的type参数即可

修改后的效果图如下:

原文地址:https://www.cnblogs.com/OliverQin/p/11077590.html

时间: 2024-10-11 17:12:00

Echarts 柱状图组的相关文章

Echarts 柱状图配置详解

柱状图比如做成如下所示图: 所有的基本配置如下: // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 'red' }, subtext: '副标题', subtextStyle: { color: 'blue' }, padding: [0, 0, 10, 100] // 位置 }, // ---- legend ---- legend: { type: 'plain',

echarts 柱状图的选中模式实现-被选中变色和再次选中为取消变色

方法: 1 function barCharShow(curr_dim,divId,result_data){ 2 mutilDim(curr_dim);//维度信息 3 var paint = initEcharts(echarts,divId); 4 var option = buildStandardBar(); 5 option.xAxis[0].data=result_data.xAxis_data; 6 option.series[0].data= result_data.data;

echarts 柱状图+折线+文字倾斜及省略

效果图: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>柱状图.折线图</title> 6 <script src="js/jquery-2.2.3.min.js"></script> 7 <script src="

echarts柱状图当数据为0时不显示0

在series --> label 中添加属性 fromatter 需求:echarts中的柱状图当数据为0时,显示数字0,影响美观(如图) 添加代码:(注意:series中的多个数组都要添加这个属性,少一个都不行!!!) formatter: function (params) { if (params.value > 0) { return params.value; } else { return ''; } }, 代码所在位置 + 修改后样式如下: 原文地址:https://www.c

Echarts柱状图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ECharts-基本线性图及其配置要求</title> <script src="js/esl.js" type="text/javascript"></script> </head&

echarts 柱状图

$(document).ready(function () { var myChart = echarts.init(document.getElementById('main'), 'westeros'); function main(chartData) { var delayAvg = []; //延迟完成数组 var completedAvg = []; //按时完成数组 for (var i = 0; i < chartData.delayDayList.length; i++) {

Echarts柱状图的学习总结(一)

今天在学习Echarts练习时,总是在路径的配置上出现错误,作为入门,总结一下,在此分享给大家,希望有用. ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.2.0下载地址:  http://echarts.baidu.com/build/echarts-2.2.0.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http:/

echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)

xAxis : [             {                 type : 'category', //                 name:'额度', //这是设置的false,就不不显示下方的x轴,默认是true的                 show: false, //这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个                 data : ['最多','平均','最少'],                 axisL

echarts柱状图实现每个柱子颜色不同

需求如下: series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220], //重点在这,设置itemStyle itemStyle:{ normal:{ color:function(params){ var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA