echarts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>123456</title>
<!-- 1.引入 ECharts 文件 -->
<script src='echarts.min.js'></script>
</head>
<body>
<!--2. 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id='main' style="width: 600px;height: 400px;border: 1px solid #999;"></div>
<!-- 3.js 初始化和配置参数 -->
<script>
//3.1 初始化 初始化echarts实例 echarts.init()
var myChart = echarts.init(document.getElementById('main'))
//3.2 配置参数
var option = {
title: { //标题组件,包含主标题和副标题
show: true, //是否显示标题组件
text: '百度', //主标题文本,支持使用 \n 换行
link: 'https://www.baidu.com', //主标题文本超链接
target: 'blank', //指定窗口打开主标题超链接
textStyle: { //主标题样式
color: 'red', //主标题文字的颜色
},
subtext: '学习echarts', //副标题文本,支持使用 \n 换行
subtextStyle: {
color: 'blue'
},
padding: 20, //标题内边距,单位px,默认各方向内边距为5
itemGap: 300, //主副标题之间的间距
//title 组件离容器左侧的距离
// left :'center',
// top:20,
},
grid:{//直角坐标系内绘图网格
left:'10',//grid 组件离容器左侧的距离
bottom<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>123456</title>
<!-- 1.引入 ECharts 文件 -->
<script src='echarts.min.js'></script>
</head>
<body>
<!--2. 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id='main' style="width: 600px;height: 400px;border: 1px solid #999;"></div>
<!-- 3.js 初始化和配置参数 -->
<script>
//3.1 初始化 初始化echarts实例 echarts.init()
var myChart = echarts.init(document.getElementById('main'))
//3.2 配置参数
var option = {
title: { //标题组件,包含主标题和副标题
show: true, //是否显示标题组件
text: '百度', //主标题文本,支持使用 \n 换行
link: 'https://www.baidu.com', //主标题文本超链接
target: 'blank', //指定窗口打开主标题超链接
textStyle: { //主标题样式
color: 'red', //主标题文字的颜色
},
subtext: '学习echarts', //副标题文本,支持使用 \n 换行
subtextStyle: {
color: 'blue'
},
padding: 20, //标题内边距,单位px,默认各方向内边距为5
itemGap: 300, //主副标题之间的间距
//title 组件离容器左侧的距离
// left :'center',
// top:20,
},
grid:{//直角坐标系内绘图网格
left:'10',//grid 组件离容器左侧的距离
bottom:'10',
right:'20',
//grid 区域是否包含坐标轴的刻度标签
:'10',
right:'20',
//grid 区域是否包含坐标轴的刻度标签