echarts:饼、柱状、折线图的配置说明

文章目录

前言
柱状图和折线图主要配置项：
饼图的基本配置项
series 数据项
有什么功能组件？
渐进式案例：
- vue中画一个基本的饼图
- 为它添加提示组件tooltip
- dataZom，用柱状图演示
- 添加visualMap
- 添加图示legend
- 添加个标题（最终版）
总结

前言

本文将渐进式的介绍一下echarts的常用图标及一些组件。关于echarts的学习方式，本人推荐先echarts了解有哪些组件和功能，对应的配置是哪块，然后去查阅官方文档，因为配置项多，没法去记住也没必要记住。以下代码可以直接复制预览效果，框架用的是cdn的。
注：gif文件较大，建议直接复制代码运行

柱状图和折线图主要配置项：

对于二维的图标来说，配置项有x轴，y轴，数据项

let options={xAxis:{data:[]},// 配置x轴数值，一般为类型名称yAxis:{},//y轴数值，一般为空对象即可。会根据数据自动划分，也可自定义填补series:[{}],// 数据组，一组为一个对象
}
/* 柱状与折线图配置区别为数据组的类型，折线图type为"line"柱状图type为"bar"其次，两种类型是可以同在一个图表的
*/

饼图的基本配置项

饼图不同于二维图表，没有x轴和y轴，因此这两项配置项对于饼图来说是无效配置。主要配置只有数据项series。

let pieOption = {/* 每项的名称 */series:[{}]
}

series 数据项

无论是那种数据统计表，配置类型有什么不同，但是每种都**必有**数据项series。它是一个数组，包含多个数据组,type属性来定义数据项的类型

// 柱状图
{type:'bar',data:[]}
// 折线图
{type:'line',data:[]}
// 饼图
{type:'pie',data:[]}

有什么功能组件？

提示框组件（tooltip）、移动数据范围组件(dataZoom)、数值颜色程度(visualMap)、图示（legend）、图表标题(title)

渐进式案例：

vue中画一个基本的饼图

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script><title></title><style type="text/css">#demo{width: 300px;height: 200px;}</style>
</head>
<body><div id="demo"></div><script type="text/javascript">let ecDemo = echarts.init(document.getElementById('demo'));let options = {series:[{name:'人数',type:'pie',data:[{value: 100,name: "java"},{value: 200,name: "go"}, {value: 300,name: "php"}, {value: 400,name: "python"}, {value: 500,name: "nodejs"}]}]}ecDemo.setOption(options)</script>
</body>
</html>

为它添加提示组件tooltip

只是用默认的即可，tooltip:{}

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script><title></title><style type="text/css">#demo{width: 300px;height: 200px;}</style>
</head>
<body><div id="demo"></div><script type="text/javascript">let ecDemo = echarts.init(document.getElementById('demo'));let options = {// 添加默认提示组件tooltip:{},series:[{name:'人数',type:'pie',data:[{value: 100,name: "java"}, {value: 200,name: "go"}, {value: 300,name: "php"}, {value: 400,name: "python"}, {value: 500,name: "nodejs"}]}]}ecDemo.setOption(options)</script>
</body>
</html>

dataZom，用柱状图演示

因为饼图没有这个配置项，所以用柱状图实例一下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script><title></title><style type="text/css">#demo{width: 600px;height: 300px;}</style>
</head>
<body><div id="demo"></div><script type="text/javascript">let ecDemo = echarts.init(document.getElementById('demo'));let options = {dataZoom:{},// 标题 title:{text:'柱子图'},xAxis:{data:["java","go","nodejs","php","python"]},yAxis:{},legend:{// 名称要与数据项的name对应这样才能控制到对应的数据data:["java","go","nodejs","php","python"]},series:[{type:'bar',data:[100,200,300,400,500]}]}ecDemo.setOption(options)</script>
</body>
</html>

添加visualMap

visualMap:{}

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script><title></title><style type="text/css">#demo{width: 600px;height: 300px;}</style>
</head>
<body><div id="demo"></div><script type="text/javascript">let ecDemo = echarts.init(document.getElementById('demo'));let options = {// 添加默认提示组件tooltip:{},// 数值颜色visualMap:{},series:[{name:'人数',type:'pie',data:[{value: 100,name: "java"}, {value: 200,name: "go"}, {value: 300,name: "php"}, {value: 400,name: "python"}, {value: 500,name: "nodejs"}]}]}ecDemo.setOption(options)</script>
</body>
</html>

添加图示legend

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script><title></title><style type="text/css">#demo{width: 600px;height: 300px;}</style>
</head>
<body><div id="demo"></div><script type="text/javascript">let ecDemo = echarts.init(document.getElementById('demo'));let options = {// 添加默认提示组件tooltip:{},// 数值颜色visualMap:{},// legend:{// 名称要与数据项的name对应这样才能控制到对应的数据data:["java","go","nodejs","php","python"]},series:[{name:'人数',type:'pie',data:[{value: 100,name: "java"}, {value: 200,name: "go"}, {value: 300,name: "php"}, {value: 400,name: "python"}, {value: 500,name: "nodejs"}]}]}ecDemo.setOption(options)</script>
</body>
</html>

添加个标题（最终版）

title:{text:'标题内容'}

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script><title></title><style type="text/css">#demo{width: 600px;height: 300px;}</style>
</head>
<body><div id="demo"></div><script type="text/javascript">let ecDemo = echarts.init(document.getElementById('demo'));let options = {// 添加默认提示组件tooltip:{},// 数值颜色visualMap:{},// // 标题 title:{text:'饼图'},legend:{// 名称要与数据项的name对应这样才能控制到对应的数据data:["java","go","nodejs","php","python"]},series:[{name:'人数',type:'pie',data:[{value: 100,name: "java"}, {value: 200,name: "go"}, {value: 300,name: "php"}, {value: 400,name: "python"}, {value: 500,name: "nodejs"}]}]}ecDemo.setOption(options)</script>
</body>
</html>

总结

echarts配置项杂多，且都是些固定的。要使用它更多的是要了解echarts，有哪些功能、功能对应的是些配置项。然后去 查阅官方的文档。对于常见的配置可以熟悉一下，例如饼图、柱状图和折线图的常用配置。

echarts官网