zoukankan      html  css  js  c++  java
  • Echarts 简单报表系列一:柱状图

    见代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
      <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style=" 600px;height:400px;"></div>
        <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
        <script>
        var myChart = echarts.init(document.getElementById('main'));
        myChart.title = '坐标轴刻度与标签对齐';
        option = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 52, 200, 334, 390, 330, 220],
                    itemStyle: {  
                        normal: {  
                            color: function(params) {
                          var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];
                                //若返回的list长度不足,不足部分自动显示为最后一个颜色
                            return colorList[params.dataIndex]
                          },
                            label: {  
                                show: true,  
                                position: 'top'
                            }  
                        }  
                    }
                }
            ]
        };
        myChart.setOption(option)
        </script>
    </body>
    </html>

    效果如下:

  • 相关阅读:
    Android集成科大讯飞SDK语音听写及语音合成功能实现
    Android开发中一些常见的问题解决方案
    Android混淆配置文件规范
    android第三方分享之友盟社会化组件
    android一些常用的代码2(收藏)
    svn
    ubuntu 解决中文zip乱码问题
    android优秀Github源码整理
    linux清理内存
    cocos2d-x图层相关 锚点
  • 原文地址:https://www.cnblogs.com/huanghongbo/p/9059901.html
Copyright © 2011-2022 走看看