• 数据获取实现柱状图


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div id='bar' style="450px;height:300px;"></div>
    </body>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript" src="js/echarts.simple.min.js" ></script>
    <script>
    //['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    //[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],


    function bar(id,legend,xdata,mes){
    var bar=echarts.init(document.getElementById(id));
    var option={
    title:{
    text:"练习接口柱状图",
    x:"center"
    },
    color:['#0fb4d6'],
    tooltip : {
    trigger: 'axis'
    },
    legend: {
    data:legend
    },
    xAxis:[
    {
    type:'category',
    data:xdata,
    axisTick : { // 轴标记
    show:false
    },
    axisLine : { // 轴线
    show: true,
    lineStyle: {//水平州的颜色
    color: '#3a3c4c',
    type: 'solid',
    1
    }
    },
    axisLabel : {
    show:true,
    textStyle: {//水平轴字体颜色
    color: '#333',
    fontSize: 12,
    }
    },
    splitLine : {//去掉背景曲线
    show:false,
    }
    }
    ],
    yAxis:[
    {
    type:'value',
    position: 'left',
    axisTick : { // 轴标记
    show:false,
    },
    splitLine : {//去掉背景曲线
    show: false
    },
    axisLabel : {
    show:true,
    textStyle: {//垂直轴字体颜色
    color: '#333',
    fontSize: 12,
    }
    }
    }
    ],
    series : [
    {
    name: '产量',
    type: 'bar',
    barWidth:14,//柱的宽度
    barGap:'10',
    data:mes
    }
    ]
    }
    bar.setOption(option);
    }

    var _legend=[];
    $.ajax({
    dataType:"json",
    url:"js/bar.json",
    type:"get",
    success:function(data){
    console.log(data.categories);
    _legend=data.legend;
    var x_data=data.categories;
    var _mes=data.data;
    console.log(_mes)
    bar("bar",_legend,x_data,_mes);
    }
    })
    </script>
    </html>

    {
    "legend":"产量",
    "categories": [
    "苹果",
    "橘子",
    "荔枝",
    "桃子",
    "栗子",
    "梨子",
    "柿子"
    ],
    "data": [
    500,
    280,
    386,
    190,
    107,
    207,
    452
    ]
    }

  • 相关阅读:
    drf请求生命周期
    正向代理和反向代理
    cbv源码分析
    Python搭建调用本地dll的Windows服务(浏览器可以访问,附测试dll64位和32位文件)
    Python实现聊天机器人接口封装部署
    Python实现机器人语音聊天
    Python爬虫下载美女图片(不同网站不同方法)
    微信小程序-点餐系统
    Win10系统Python3.8的升级与安装
    Python破解Wifi密码思路
  • 原文地址:https://www.cnblogs.com/yingxi0/p/9082102.html
Copyright © 2020-2023  润新知