• ECharts-条形图制作



    @{
    Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/echarts.min.js"></script>
    <title>Echarts</title>
    </head>
    <body>
    <div id="main" style=" 900px;height:400px;"></div>

    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
    title: {
    text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
    data:['订单数','销售额']
    },
    xAxis: {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    },
    yAxis: [
    {
    name: '订单数',
    type: 'value',
    max: 60,
    min: 0,
    scale:true,
    },
    {
    name: '销售额(万元)',
    //nameLocation: 'start',
    scale:true,
    max: 60,
    min:0,
    type: 'value',

    }
    ],
    series: [{
    name: '订单数',
    type: 'line',
    label: {
    normal: {
    show: true,
    position: 'top'
    }
    },
    //areaStyle: { normal: {} },

    data: [5, 20, 26, 10, 10, 20,15,21,9,14,19,26]
    },
    {
    name: '销售额',
    type: 'line',

    yAxisIndex: 1,//使销售额受右边Y轴控制

    label: {
    normal: {
    show: true,
    position: 'top'
    }
    },
    //areaStyle: { normal: {} },

    data: [20,36,40,30,28,38,42,50,39,29,34,40]
    }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
    </body>
    </html>

  • 相关阅读:
    滚轮事件
    键盘事件
    运动(学习)
    事件(没有尽头的待完善)
    js 盒子模型(没写完)
    Number 数字相关的方法, 强制 、隐式类型转换 、进制之间转换
    操作DOM 和 节点
    DOM
    Object 的一些静态方法 、 for-in 循环、Object.keys() 、Object.values()、Object.entries()
    删除字段
  • 原文地址:https://www.cnblogs.com/DotaSteam/p/5454116.html
Copyright © 2020-2023  润新知