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 区域是否包含坐标轴的刻度标签

 

posted @ 2022-02-25 11:04  椅念琼  阅读(165)  评论(0编辑  收藏  举报