• 数据获取实现柱状图


    <!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
    ]
    }

  • 相关阅读:
    lua与C++的绑定
    lua与C的绑定
    如何得到真实的需求?
    mysql学习笔记——对数据库的操作
    排列组合公式
    英语口语积累笔记
    初学C++-----------------类的组合
    初学C++-----------------类的拷贝构造函数
    初学C++-----------------类的构造函数、析构函数
    初学C++-----------------类的定义
  • 原文地址:https://www.cnblogs.com/yingxi0/p/9082102.html
Copyright © 2020-2023  润新知