个人作业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>
原文地址:https://www.cnblogs.com/lkwkk/p/14910380.html