zoukankan      html  css  js  c++  java
  • 个人作业3—折线图

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <title>省市状况</title>
    </head>
    <% String sre="哈利路亚"; %>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <body>
    <div id="fine" style=" 600px;height:400px;"></div>
    <script type="text/javascript">
    var chartDomy = document.getElementById('fine');
    var myCharts = echarts.init(chartDomy);
    var options;

    options = {
    dataZoom: [
    { // 这个dataZoom组件,默认控制x轴。
    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
    start: 70, // 左边在 10% 的位置。
    end: 100 // 右边在 60% 的位置。
    },
    { // 这个dataZoom组件,也控制x轴。
    type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
    start: 70, // 左边在 10% 的位置。
    end: 100 // 右边在 60% 的位置。
    }
    ],
    title: {
    text: '近七天'+""+'省/直辖市/自治区确诊人数变化情况',
    subtext: '数据来源:腾讯疫情追踪模块',
    sublink:'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
    },
    tooltip: {
    trigger: 'axis'
    },
    xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    type: 'value'
    },
    series: [{
    data: [100000, 130000, 140000, 150005, 120000, 200000, 176000],
    type: 'line'
    }]
    };

    options && myCharts.setOption(options);
    </script>
    </body>
    </html>
  • 相关阅读:
    配置ssl(阿里云+腾讯云)
    使用Nativefier将web页面打包为桌面应用
    临时切换淘宝源下载包
    ajax实现异步上传多图并且预览
    通过phpexcel插件导出报表功能实现
    ThinkPHP5.0自定义命令行的使用
    Longest Substring Without Repeating Characters
    计算机操作系统巡回置换算法
    HDU 2041 DP
    HDU 2044 DP (fibonacci)
  • 原文地址:https://www.cnblogs.com/lkwkk/p/14910380.html
Copyright © 2011-2022 走看看