zoukankan      html  css  js  c++  java
  • 【前端统计图】echarts改变颜色属性的demo

    一:柱状图改变颜色

    5640239-d199a113617f4e2f.png
    图片.png

    代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <!--   柱状统计图 -->
            <div class="row">
                <div id="main" style=" 900px; height: 350px;  margin-top:80px;"></div>
            </div>
        </body>
        <script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                title: {
                    text: '平均耗时(分钟)',
    
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    /*  data: [ '2012年']*/
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']
                },
                series: [{
                        name: '2012年',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#a8bcd4'
                            }
                        },
                        data: [10, 20, 31, 14, 11, 67]
                    }
                ]
            });
        </script>
    
    </html>
    

    二:横向柱状图渐变

    5640239-653c822734916756.png
    图片.png

    代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <!--   柱状统计图 -->
            <div class="row">
                <div id="main" style=" 900px; height: 350px;  margin-top:80px;"></div>
            </div>
        </body>
        <script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                title: {
                    text: '平均耗时(分钟)',
    
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    /*  data: [ '2012年']*/
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']
                },
                series: [{
                        name: '2012年',
                        type: 'bar',
                         itemStyle: {
                    normal: {
                       
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#fff'
                        }, {
                            offset: 1,
                            color: '#3fa7dc'
                        }]),
                        
                    }
                },
                        data: [10, 20, 31, 14, 11, 67]
                    }
                ]
            });
        </script>
    
    </html>
    

    文末福利:

    福利一:前端,Java,产品经理,微信小程序,Python等10G资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
    福利二:微信小程序入门与实战全套详细视频教程

    5640239-110eda03fdb4f88a
    image

    原文作者:祈澈姑娘
    原文链接:https://www.jianshu.com/u/05f416aefbe1
    创作不易,转载请告知

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

  • 相关阅读:
    Java学习开篇
    《我的姐姐》
    世上本无事,庸人自扰之
    这48小时
    补觉
    淡定
    es java api 设置index mapping 报错 mapping source must be pairs of fieldnames and properties definition.
    java mongodb groupby分组查询
    linux 常用命令
    mongodb too many users are authenticated
  • 原文地址:https://www.cnblogs.com/ting6/p/9725785.html
Copyright © 2011-2022 走看看