zoukankan      html  css  js  c++  java
  • Ecarts 折线图柱状图

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
    </head>
    <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style=" 600px;height:400px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
    title: {
    text: '信息分析'
    },
    tooltip: {},

        //柱状和折线切换代码
    toolbox: {
    show: true,
    feature: {
    dataZoom: {
    yAxisIndex: 'none'
    }, //区域缩放,区域缩放还原
    dataView: {
    readOnly: false
    }, //数据视图
    magicType: {
    type: ['line', 'bar']
    },  //切换为折线图,切换为柱状图
    restore: {},  //还原
    saveAsImage: {}   //保存为图片
    }
    },
    legend: {
    data:['广告']
    },
    xAxis: {
    data: ["2018-10-1","2018-10-2","2018-10-3","2018-10-4","2018-10-5","2018-10-6","2018-10-7","2018-10-8","2018-10-9"]
    },
    yAxis: {},
    series: [{
    name: '广告',
    type: 'bar',
    color:['green'],
    data: [5, 20, 36, 10, 10, 20,50,20,30]
    }],
    dataZoom:{
    realtime:true, //拖动滚动条时是否动态的更新图表数据
    height:5 ,//滚动条高度
    start:20,//滚动条开始位置(共100等份)
    end:100//结束位置(共100等份)
    }
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
    </body>
    </html>
  • 相关阅读:
    npm镜像切换
    vue组件样式覆盖问题-module
    实现微信小程序多文件同时上传,并且携带参数
    提交现有代码到gitee
    富文本框 字段存入数据库
    js动态添加 <select>标签disable属性
    validate验证,rules属性名为特殊属性名
    springboot themleaf ajax总结
    th:field,th:value
    直接在页面上显示当前年份
  • 原文地址:https://www.cnblogs.com/vinzen/p/10169391.html
Copyright © 2011-2022 走看看