ECharts---⼀个⾮常炫酷好⽤的图表库。发现⾃⼰写的好详细。怪不得当时弄那
么久。
ECharts_study
对于渲染可视化图标的库有许多，因为项⽬需要，我学习了 Echarts 。完整叫 Apache ECharts
很多图在基本的准备部分不会详细说明，因此初学⼀定要看基本准备的部分
另外 ，图表真的很多 ，
什么是 Echarts
ECharts，⼀个使⽤ JavaScript 实现的开源可视化图表库，可以流畅的运⾏在 PC 和移动设备上，兼容当前绝⼤部分浏览器
（IE9/10/11，Chrome，Firefox，Safari等），底层依赖⽮量图形库 ，提供直观，交互丰富，可⾼度个性化定制的数据可视化图表。
ECharts 提供了常规的、、、、，⽤于统计的，⽤于地理数据可视化的、、，⽤于关系数据可视化的、
、，多维数据可视化的，还有⽤于BI 的，，并且⽀持图与图之间的混搭。
可以说很⽜逼，很酷了。那废话不多说，开始看看怎么弄吧
初体验
可直接复制使⽤。
<!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>ECharts-初体验</title>
<script src="cdn.jsdelivr/npm/echarts@5.2.0/dist/echarts.js"></script>
</head>
<body>
<div id="main"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('main'));
// 指定图表的配置项和数据
var option ={
// 图标标题
title:{
text:'ECharts 初体验'
},
// 类型HTML 的legend 标签，也是图标的标题。只不过这个标签可以是具体某个图标的。⽽如上的 title 可以是显⽰所有图标的总标题            legend:{
data:['成绩']
},
// 柱状，折现等有横竖坐标的标题，结合图会更容易理解
xAxis:{
data:['语⽂','数学','英语','物理','⽣物','化学']
},
yAxis:{},
// 图列表。
series:[{
name:'成绩',
type:'bar',
data:[120,130,119,90,90,88]
}]
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
</script>
</body>
</html>
安装
安装的⽅法有很多，如直接下载代码， npm 获取， CDN 。甚⾄可以只选择安装需要的部分。
npm
npm install echarts --save
CDN
<script src="cdn.jsdelivr/npm/echarts@5.2.0/dist/echarts.js"></script>
然后在⽂件⾥使⽤
<script src="echarts.js"/>
或者官⽅提供的特别定制
导⼊项⽬
前⾯介绍了如何安装，对于使⽤ CDN 的，会加载全部模块 。⽽使⽤ npm 或 yarn 安装或者只安装部分功能的 。我们可以只导⼊部分需要的模块。
全部导⼊
import*as echarts from'echarts';
这会把 ECharts 提供的组件，渲染器都导⼊ 。 并集中在 echarts 对象中 。如果我们想使⽤通过点⽅法即可。
echarts.init(....)
部分导⼊
部分导⼊我们可以只导⼊我们需要的模块，减少代码最后的体积。
其中核⼼模块和渲染器是必须的 。其他图标组件我们可以按需引⼊ 。注意引⼊后要注册才能使⽤。
// 引⼊ echarts 核⼼模块，核⼼模块提供了 echarts 使⽤必须要的接⼝。
import*as echarts from'echarts/core';
// 引⼊柱状图图表，图表后缀都为 Chart
import{ BarChart }from'echarts/charts';
// 引⼊提⽰框，标题，直⾓坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import{
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
DatasetComponentOption,
TransformComponent
}from'echarts/components';
// 标签⾃动布局，全局过渡动画等特性
import{ LabelLayout, UniversalTransition }from'echarts/features';
// 引⼊ Canvas 渲染器，注意引⼊ CanvasRenderer 或者 SVGRenderer 是必须的⼀步
import{ CanvasRenderer }from'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
svg canvasDatasetComponent,
TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
// 接下来的使⽤就跟之前⼀样，初始化图表，设置配置项
var myChart = echarts.ElementById('main'));
myChart.setOption({
// ...
});
基本准备（也是其他图表的通⽤步骤）
准备步骤
1. 创建⼀个盒⼦ 。⽤于显⽰图表 。记得要给它⼀个初始的宽⾼。
2. 引⼊ echart 提供的init ⽅法 , 其他 API 或组件可以按需引⼊
3. 准备⼀个初始化图表函数 ，在初次渲染或需要重新渲染时可以调⽤。(⾮必要，如果不需要修改数据)
4. 在初始函数⾥调⽤ init ⽅法 ，传⼊提前准备的盒⼦节点。init ⽅法返回⼀个图表的实例（echartsInstance )。⼀个盒⼦只能初始⼀
个图表实例
5. 使⽤图表实例的 setOption⽅法 ，传⼊⼀个 option 对象 ， 此对象⽤于配置⽣成的图标类型和数据及样式。
<template>
<div>
<!-- 设置⼀个⽤来显⽰图表的盒⼦ -->
<div id="con" :></div>
</div>
</template>
<script>
// 导⼊ init
import { init } from "echarts";
export default {
name: "Echarts_bar",
// 在组件挂载后调⽤，初始化图表
mounted() {
this.initChart();
},
methods: {
initChart() {
// 调⽤ init  ,  返回⼀个 ecahrt实例
let myChart = ElementById("con"));
// 配置图表 , option 是⼀个对象，⽤于配置图表
myChart.setOption(option）
};
</script>
option 对象
option 对象的配置是学习图表的难点 ，基础的准备是通⽤且简单的易。
因此学 echarts ，就是学怎么配置 option 对象。怎么配置出需要的图表。
从官⽹看， option 对象有很多配置。option 下的键值的值可能是⼀个对象，对象⼜有很多键值。但这些是汇总 ，⼀种图表使⽤到的只是部分 ，⽽且有的可以使⽤但是不是必须使⽤。
option:{
title:{...}// 配置标题
xAxis:{...}
yAxis:{...}// 配置 x 和 y 轴
series:[{}]// 配置图表
//....
}
同⼀个图表实例⾥设置的option 还有⼀个特点。新旧 option 是合并不是代替。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。