zoukankan      html  css  js  c++  java
  • echarts柱状图

    echarts是一款画图表的插件,引用echarts.common.min.js文件,下载地址https://echarts.baidu.com/download.html。
    function BarChart(elementId){
         //初始化echarts实例    
         var myChart = echarts.init(document.getElementById(elementId));   
         // 指定图表的配置项和数据
            var option = {
                title: {
                    text: ''
                },
                tooltip: {
                     axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                 type : 'shadow'   // 默认为直线,可选为:'line' | 'shadow'
              }
                },
                legend: {
                    data:['成绩']
                },
           /*

           grid: {left: '3%',right: '4%',top: '20%',containLabel: true,height:100},

                */
                xAxis: {
                    data: ["英语","数学","语文","物理","化学"],
                    //interval :10
                },
                yAxis: {
                     type : 'value',
                     name:'成绩',
                     min: 0,
                     max: 100,
                },
                series: [{
                    name: '成绩',
                    type: 'bar',
                     itemStyle: {
                        normal: {
                            color: function(params) {
                                var colorList = [
                                  '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'
                                ];
                                return colorList[params.dataIndex]
                            },
            //以下为是否显示,显示位置和显示格式的设置了
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{b}
    {c}'
                            }
                        }
                    },   
                    barWidth:70,
                    data: [90, 80, 95, 85, 90]
                }]
            }
            myChart.clear();
        myChart.setOption(option,true);
       }
       BarChart('domId')
    
    
         
    成绩
  • 相关阅读:
    Jenkins自动化部署入门详细教程
    单元测试
    弱网测试
    Token、Cookie和Session
    测试开发人员必备Linux命令
    TestNG(一)
    char和varchar
    你平时会看日志吗,一般会出现哪些异常(Exception)
    内存溢出和内存泄漏的区别,产生原因以及解决方案
    测试一个电梯
  • 原文地址:https://www.cnblogs.com/learning-life/p/10718582.html
Copyright © 2011-2022 走看看