本文深入探讨了数据可视化的历史、应用场景，以及前端技术选型。从简单的Excel图表到复杂的Web应用，重点介绍了HTML5 canvas和SVG的绘制方法，以及ECharts的入门和进阶用法，包括柱状图、折线图、饼图的实现。此外，还讲解了ECharts的基本概念，如系列、数据集和坐标系，展示了如何利用ECharts进行多图表组合和数据映射。
目录
数据可视化应用场景
什么是数据可视化？
基本概念
数据可视化，是关于数据视觉表现形式的科学技术研究
这个概念向我们传达了两个信息：
- 数据可视化是一门学科
- 数据可视化与数据和视觉有关
数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种 2D 图表、3D 图表、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大
数据可视化的发展历史
起源
数据可视化起源于 20 世纪 60 年代诞生的计算机图形学(opens new window)
计算机图形学(Computer Graphics，简称CG)是一种使用数学算法将二维或三维图形转化为计算机显示器的栅格形式的科学
计算机图形学广泛应用于各个领域，深刻影响和改变着我们的生活。
如果你想学习计算机图形学，可以从这里 (opens new window)入门
数据可视化
在获得计算机图形学发展后，先后经历了科学可视化、信息可视化和数据可视化三个阶段，最初由科研人员提出科学建模和数据的可视化需求，在进入 20 世纪 90 年代后，出现大量单机数据可视化需求，EXCEL 是这个时期的代表，互联网时代各种产品兴起，大数据爆发式增长，促使数据可视化技术飞速发展
数据可视化应用场景
简单应用
特点 单机离线 数据量小、维度少
典型应用 Excel XMind Visio OminiGraffle
复杂应用
特征 互联网应用 数据量大，维度多
典型应用 数据大屏 数据报表 地图
数据可视化前端技术选型
数据可视化解决方案
前端数据可视化解决方案如下：
Skia
Skia (opens new window)是 Chrome 和 Android 的底层 2D 绘图引擎，具体可参考百度百科 (opens new window)，Skia 采用 C++ 编程，由于它位于浏览器的更底层，所以我们平常接触较少
对底层绘图感兴趣的同学可以从这个案例 (opens new window)入手，了解一下 C++ 的可视化编程。
OpenGL
OpenGL（Open Graphics Library）是2D、3D图形渲染库，它可以绘制从简单的2D图形到复杂的3D景象。OpenGL 常用于 CAD、VR、数据可视化和游戏等众多领域。
Chrome
Chrome 使用 Skia 作为绘图引擎，向上层开放了 canvas、svg、WebGL、HTML 等绘图能力。
canvas
canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。
canvas标签
<canvas> 标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。
注意：
- canvas:是html5中新增的特性，双闭合标签
- canvas 默认宽度与豪赌 300*150
- 浏览器认为canvas 是一张图片
- 给 canvas 添加文本内容 子节点都是没有意义的
- 画布中绘制图形，显示文字必须通过js “笔”去完成
- 标签的宽高必须通过标签属性的width height 设置 不能通过样式修改
<canvas id="charts" width="800" height="400"></canvas>
getContext()
context 是一个封装了很多绘图功能的对象，我们在页面中创建一个 canvas 标签之后，首先要使用 getContext() 获取 canvas 的上下文环境，目前 getContext() 的参数只有 2d，暂时还不支持 3d
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
const canvas = document.getElementById('charts');
const context = canvas.getContext('2d');
绘制线段
moveTo(x, y)：把路径移动到画布中的指定点，不创建线条lineTo(x, y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条-
getContext('2d') 获取画布的笔【上下文】
-
closePath()可以设置起点和最终点的链接
-
fillStyle = 'red' fill() 设置图形填充的颜色
-
strokeStyle = 'pink' lineWidth = '20' 设置线段颜色
-
stroke() 绘制线
//画布中绘制图形，显示文字必须通过js “笔”去完成
let canvas = document.querySelector('canvas')
//获取画布的笔【上下文】
let ctx = canvas.getContext('2d')
//绘制线段：起点的设置
ctx.moveTo(100, 100)
//其他点的设置（可以有多个）
ctx.lineTo(100, 200)
ctx.lineTo(200, 100)
//可以设置起点和最终点的链接
ctx.closePath()
//设置图形填充的颜色
ctx.fillStyle = 'red'
ctx.fill()
// 设置线段颜色
ctx.strokeStyle = 'pink'
ctx.lineWidth = '20'
//stroke 绘制线
ctx.stroke()绘制矩形
fillRect(x, y, width, height)绘制填充颜色的矩形strokeRect(x, y, width, height)绘制线条的矩形
//获取DOM节点
let canvas = document.querySelector('canvas');
//获取上下文
let ctx = canvas.getContext('2d');
//绘制矩形的第一种方式 strokeRect 描边矩形 x, y, w ,h
ctx.strokeRect(100, 200, 100, 200)
// 第二种方式 fillRect填充 默认黑色(可以替换)
ctx.fillStyle = 'red'
ctx.fill()
ctx.fillRect(300, 200, 100, 200)
绘制圆形
arc(x, y, radius, starAngle, endAngle, anticlockwise)- x : 圆心的 x 坐标
- y：圆心的 y 坐标
- radius ： 半径
- starAngle ：开始角度
- endAngle：结束角度
- anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针
//获取DOM
let canvas = document.querySelector('canvas');
//获取上下文
let ctx = canvas.getContext('2d');
//绘制圆形
ctx.beginPath()
//绘制图形的方法：x，y r 起始弧度,结束弧度.是否逆时针绘制
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true)
ctx.fillStyle = 'red'
ctx.fill()
//绘制圆形
ctx.stroke()清除路径
清除绘画的路径，多个图形就不会连接在一起
context.beginPath()
context.closePath()
清除矩形区域
当在一个画布反复绘制图形，需要将上一次的图形清空
clearRect(x, y, width, height)
绘制文字
fillText(text, x, y, maxWidth)
//获取节点
let canvas = document.querySelector('canvas');
//获取上下文-笔
let ctx = canvas.getContext('2d');
//绘制矩形
ctx.fillRect(100,200,100,200);
//清除画布-整个画布被清除
//ctx.clearRect(0,0,600,400);
//清除部分画布
ctx.clearRect(100,200,50,100);
//设置文字大小
ctx.font="20px 微软雅黑";
ctx.fillStyle ='red';
//绘制文字
ctx.fillText("数据可视化",50,20);案例：绘制一个柱状图
TIP
//获取节点
let canvas = document.querySelector('canvas');
//获取上下文
let ctx = canvas.getContext('2d');
//绘制文本，左上角文本
ctx.font = "18px 微软雅黑"
ctx.fillText('数据可视化', 50, 60)
//绘制线段
ctx.moveTo(100, 100)
ctx.lineTo(100, 400)
ctx.lineTo(700, 400)
ctx.stroke()
//绘制其他的线段
ctx.moveTo(100, 100)
ctx.lineTo(700, 100)
ctx.fillText('150', 70, 110)
ctx.moveTo(100, 160)
ctx.lineTo(700, 160)
ctx.fillText('120', 70, 170)
ctx.moveTo(100, 220)
ctx.lineTo(700, 220)
ctx.fillText('90', 70, 230)
ctx.moveTo(100, 280)
ctx.lineTo(700, 280)
ctx.fillText('60', 70, 290)
ctx.moveTo(100, 340)
ctx.lineTo(700, 340)
ctx.fillText('60', 70, 350)
ctx.fillText('0', 70, 400)
ctx.stroke()
//绘制水平轴
ctx.moveTo(250, 400)
ctx.lineTo(250, 410)
ctx.fillText('食品', 170, 415)
ctx.moveTo(400, 400)
ctx.lineTo(400, 410)
ctx.fillText('数码', 320, 415)
ctx.moveTo(550, 400)
ctx.fillText('服饰', 460, 415)
ctx.lineTo(550, 410)
ctx.fillText('箱包', 610, 415)
ctx.stroke()
//绘制矩形
ctx.fillStyle = 'red'
ctx.fillRect(120, 200, 100, 200)
svg
SVG是一种基于 XML 的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形
基本的 SVG 元素
你可以深入 SVG 复杂的细节，但这对我们即将创建的图标不是必须的。以下列表涵盖了我们将用到的构建块。
-
<svg>包裹并定义整个矢量图。<svg>标签之于矢量图就如同<html>标签之于一个 web 页面。 -
<line>创建一条直线。 -
<polyline>创建折线。 -
<rect>创建矩形。 -
<circle>创建圆。 -
<ellipse>创建圆和椭圆。 -
<polygon>创建多边形。 -
<path>通过指定点以及点和点之间的线来创建任意形状。
详细使用
<body>
<!-- svg双闭合标签：默认宽度与高度300 * 150 svg绘制图形务必在svg标签内部使用绘制图形 -->
<svg class="box">
<!-- x1 y1第一个点的坐标 x2 y2 第二个点的坐标 -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
<line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
<!-- 绘制折线:可以多个点，多个点的时候，最好带有逗号 -->
<polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>
<!-- 绘制矩形 -->
<!-- fill属性：设置填充颜色的 fill-opacity设置填充颜色的透明度 stroke：线的颜色 -->
<rect x="400" y="400" width="150" height="50" fill="pink"></rect>
<!-- 绘制圆形 -->
<circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
<!-- 绘制圆形|椭圆 -->
<ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black;"></ellipse>
<!-- 多边行 -->
<polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0" />
<!-- 绘制任意图形 -->
<path fill-opacity="0" stroke="skyblue" d="
M 10 10
L 20 400
L 30 120
L 40 66
L 50 99
L 60 120
L 70 99
Z
"></path>
</svg>
</body>ECharts 入门
入门案例：销售柱状图
- 引入 js 库
- 编写渲染容器 DOM，添加 width 和 height 样式属性
- 获取渲染 DOM 对象
- 初始化 ECharts 对象
- 编写 option 参数
- 调用 setOption 完成渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts依赖包 -->
<script src='https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js'></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<!-- 准备一个容器：容器就是显示图标区域 -->
<div></div>
</body>
</html>
<script>
//基于准备好的DOM初始化echarts实例
let dom = document.querySelector('div');
//创建echarts实例
let mycharts = echarts.init(dom);
//指定图表的配置项与数据
mycharts.setOption({
//图表的标题
title:{
//主标题的设置
text:'数据可视化',
//子标题
subtext:"echarts基本使用",
//主标题的颜色
textStyle:{
color:'cyan'
},
//设置标题位置
left:'center'
},
//x轴的配置项
xAxis:{
//数据
data:["衣服",'直播','游戏','电影']
},
//y轴的配置项
yAxis:{
//显示Y轴的线
axisLine:{
show:true
},
//显示Y轴刻度
axisTick:{
show:true
}
},
//系列的设置：绘制什么样类型的图表、数据的展示在这里设置
series:[
{
//图表类型的设置
type:"bar",
//图表的数据 bar柱状图 line折线图 pie饼图
data:[10,20,30,40],
color:'red'
}
]
});
</script>进阶案例：多 ECharts 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts依赖包 -->
<script src='https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<!-- 准备一个容器：容器就是显示图标区域 -->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<script>
//基于准备好的DOM初始化echarts实例
let dom1 = document.querySelector('.box1');
let dom2 = document.querySelector('.box2');
//创建echarts实例
let mycharts1 = echarts.init(dom1);
let mycharts2 = echarts.init(dom2);
//指定图表的配置项与数据
mycharts1.setOption({
//图表的标题
title: {
//主标题的设置
text: '数据可视化',
//子标题
subtext: "echarts基本使用",
//主标题的颜色
textStyle: {
color: 'cyan'
},
//设置标题位置
left: 'center'
},
//x轴的配置项
xAxis: {
//数据
data: ["衣服", '直播', '游戏', '电影']
},
//y轴的配置项
yAxis: {
//显示Y轴的线
axisLine: {
show: true
},
//显示Y轴刻度
axisTick: {
show: true
}
},
//系列的设置：绘制什么样类型的图表、数据的展示在这里设置
series: [
{
//图表类型的设置
type: "bar",
//图表的数据 bar柱状图 line折线图 pie饼图
data: [10, 20, 30, 40],
color: 'red'
}
]
});
//第二个图表的配置项
mycharts2.setOption({
title: {
//主标题
text: "折线图",
left: 'center',
textStyle: {
color: 'red'
},
subtext: 'echarts基本使用',
subtextStyle: {
color: 'cyan'
}
},
//x轴
xAxis: {
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
},
yAxis: {},
//图表类型与数据
series: [
{
type: 'line',
data: [10, 20, 15, 44, 2, 19, 100],
color: 'cyan'
}
]
})
</script>ECharts 基本概念
ECharts 基本概念: 系列
系列（series）是指：一组数值映射成对应的图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts依赖包 -->
<script src='https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<!-- 准备一个容器：容器就是显示图标区域 -->
<div></div>
</body>
</html>
<script>
//基于准备好的DOM初始化echarts实例
let dom = document.querySelector('div');
//创建echarts实例
let mycharts = echarts.init(dom);
//指定图表的配置项与数据
mycharts.setOption({
//图表的标题
title: {
//主标题的设置
text: '数据可视化',
//子标题
subtext: "echarts基本使用",
//主标题的颜色
textStyle: {
color: 'cyan'
},
//设置标题位置
left: 'center'
},
//x轴的配置项
xAxis: {
//数据
data: ["衣服", '直播', '游戏', '电影']
},
//y轴的配置项
yAxis: {
//显示Y轴的线
axisLine: {
show: true
},
//显示Y轴刻度
axisTick: {
show: true
}
},
//系列的设置：绘制什么样类型的图表、数据的展示在这里设置
series: [
//柱状图
{
//图表类型的设置
type: "bar",
//图表的数据 bar柱状图 line折线图 pie饼图
data: [10, 20, 30, 40],
color: 'red'
}
,
// 折线图
{
type: 'line',
data: [10, 20, 30, 40],
color: 'pink'
},
//饼图
{
type: 'pie',
//饼图你可以显示文字，data写法如下
data: [{ name: 'x', value: 10 }, { name: 'y', value: 20 }, { name: 'z', value: 30 }, { name: 't', value: 40 }],
//饼图的宽度与高度
width: 150,
height: 150,
//饼图位置
left: 150,
top: 100,
//饼图的半径
radius: 25
}
]
});
</script>ECharts 4.0 新特性：dataset
ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts依赖包 -->
<script src='https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<!-- 准备一个容器：容器就是显示图标区域 -->
<div></div>
</body>
</html>
<script>
//基于准备好的DOM初始化echarts实例
let dom = document.querySelector('div');
//创建echarts实例
let mycharts = echarts.init(dom);
//数据集
let data = [
["衣服", 10, 22, 'x', 10],
["直播", 12, 55, 'y', 60],
["游戏", 16, 44, 'z', 50],
["电影", 19, 32, 't', 70],
]
//指定图表的配置项与数据
mycharts.setOption({
//设置字符集
dataset: {
//数据源
source: data
},
//图表的标题
title: {
//主标题的设置
text: '数据可视化',
//子标题
subtext: "echarts基本使用",
//主标题的颜色
textStyle: {
color: 'cyan'
},
//设置标题位置
left: 'center'
},
//x轴的配置项
xAxis: {
//数据
data: ["衣服", '直播', '游戏', '电影']
},
//y轴的配置项
yAxis: {
//显示Y轴的线
axisLine: {
show: true
},
//显示Y轴刻度
axisTick: {
show: true
}
},
//系列的设置：绘制什么样类型的图表、数据的展示在这里设置
series: [
//柱状图
{
//图表类型的设置
type: "bar",
//图表的数据 bar柱状图 line折线图 pie饼图
// data:[10,20,30,40],
color: 'red',
encdoe: {
y: 1
}
}
,
// 折线图
{
type: 'line',
// data:[10,20,30,40],
color: 'pink',
encode: {
y: 2
}
},
//饼图
{
type: 'pie',
//饼图你可以显示文字，data写法如下
// data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],
//饼图的宽度与高度
width: 250,
height: 250,
//饼图位置
left: 150,
top: 100,
//饼图的半径
radius: 25,
encode: {
//饼图旁边的文字
itemName: 3,
value: 4
}
}
]
});
</script>ECharts 基本概念: 组件
ECharts 中除了绘图之外其他部分，都可抽象为 「组件」。例如，ECharts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引包 -->
<script src='https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 400px;
/* border: 1px solid black; */
}
</style>
</head>
<body>
<!--准备容器 -->
<div class="box"></div>
</body>
</html>
<script>
//初始化echarts实例
//获取容器
let dom = document.querySelector('.box');
//初始化echarts实例
let mycharts = echarts.init(dom);
//配置数据
mycharts.setOption({
dataZoom: {},
//标题
title: {
text: "echarts组件"
},
xAxis: {
data: ['游戏', '电影', "直播", '娱乐']
},
yAxis: {},
series: [
{
name: "柱状图",
type: "bar",
data: [20, 30, 40, 50]
}
,
{
name: "折线图",
type: 'line',
data: [30, 40, 50, 60]
}
]
,
//提示组件
tooltip: {
//提示框文字的颜色
textStyle: {
color: 'red'
}
},
//系列切换组件
legend: {
data: ['柱状图', '折线图']
},
//工具栏组件
toolbox: {
show: true,
feature: {
saveAsImage: {},
dataZoom: {
yAxisIndex: "none"
},
dataView: {
readOnly: false
},
magicType: {
type: ["line", "bar"]
},
restore: {},
}
},
//调整图标布局
grid: {
left: 30,
right: 0,
}
})
</script>ECharts 基本概念：坐标系
很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 ECharts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系 等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。
一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。
06echarts坐标系之一个坐标系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts依赖包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<!-- 准备一个容器：容器就是显示图标区域 -->
<div></div>
</body>
</html>
<script>
//基于准备好的DOM初始化echarts实例
let dom = document.querySelector('div');
//创建echarts实例
let mycharts = echarts.init(dom);
//一个坐标系:散点图
mycharts.setOption({
//标题
title: {
text: "一个坐标系"
}
,
//x轴
xAxis: {
type:'category'
},
yAxis: {},
//散点图
series: [
{
type: "scatter",
//散点图的数据
data: [
[10, 20],
[13, 66],
[50, 9],
[44, 22],
[15, 10]
]
}
]
});多个坐标体系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts依赖包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<!-- 准备一个容器：容器就是显示图标区域 -->
<div></div>
</body>
</html>
<script>
//基于准备好的DOM初始化echarts实例
let dom = document.querySelector('div');
//创建echarts实例
let mycharts = echarts.init(dom);
//双做标题
mycharts.setOption({
title: {
text: "双坐标"
},
xAxis: {
data: ['游戏', '直播', '经济', '娱乐']
},
yAxis: [
{ //显示Y轴的线
axisLine: {
show: true
},
//显示Y轴刻度
axisTick: {
show: true
}
},
{
//显示Y轴的线
axisLine: {
show: true
},
//显示Y轴刻度
axisTick: {
show: true
}
}
],
series: [
{
type: 'line',
data: [10, 20, 30, 40],
//用的是索引值为0的y轴
yAxisIndex:1
}
,
{
type: 'bar',
data: [6, 10, 80, 20],
//用的是索引值为1y轴
yAxisIndex:0
}
]
})
</script>
扫一扫
3387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
