ECharts 简介
ECharts（Apache ECharts商业产品图表库）是一个由百度前端技术部开源,现由Apache基金会负责，基于 JavaScript 的数据可视化图表库。它提供了大量丰富、直观、可交互的图表类型，帮助开发者轻松地将数据转换为各种精美的图表，并在 Web 端进行展示。
由于其出色的性能、丰富的功能和活跃的社区，ECharts 已经成为国内乃至全球最受欢迎的数据可视化工具之一。
核心特点
- 丰富的图表类型
ECharts 提供了远超常规图表库的图表类型，包括但不限于：
常规图表：折线图、柱状图、饼图、散点图、雷达图等。
- 统计类图表：盒须图、直方图等。
- 地图类：世界地图、中国地图、省市地图、百度地图集成、热力图、航线图等。
- 关系类图表：关系图、矩形树图、旭日图、桑基图（直观展现数据流动）。
- 层次类图表：树图、树状图。
- 跨平台图表：用于展示多个维度数据的平行坐标系。
- 自定义系列：开发者可以自定义绘制逻辑，创造出独一无二的图表。
2.多种数据格式支持
无需繁琐的数据转换，ECharts 可以直接使用常见的 JavaScript 对象或数组格式的数据，也支持从 dataset 中管理数据，使得数据与配置分离，更易于管理。
3.深度交互
ECharts 内置了丰富的交互功能，如：
- 数据缩放（DataZoom）：平移、缩放查看数据细节。
- 图例切换：点击图例显示或隐藏系列。
- 数据区域选择：在坐标系中框选部分数据。
- 值域漫游：在值域轴上拖动选择不同范围的数据。
- Tooltip：鼠标悬停时显示详细数据信息。
- 动态类型切换：在多种图表类型间切换，从不同视角观察数据。
4.强大的可视化效果
ECharts 支持绚丽的视觉表现，如：
- 渐变色、阴影效果。
- 动画效果：数据更新、图表初始化时的过渡动画非常流畅自然。
- 混搭：多种图表类型可以轻松组合在一个坐标系中（例如，折线图和柱状图混搭）。
5.移动端优化
针对移动端小屏设备进行了专门的优化，支持手势操作（如触摸、缩放），确保在移动端也有良好的体验。
6.开源与社区活跃
ECharts 在 GitHub 上完全开源，拥有庞大的用户群体和活跃的社区。这意味着你可以轻松找到大量的示例、教程和问题解答。其官方文档也非常详尽。
7.兼容性良好
兼容当前绝大多数浏览器，包括 IE8/9/10/11，Chrome，Firefox，Safari 等。
ECharts+Vue3使用
1.使用vite构建vue3
执行命令
npm create vite
2.进入项目目录,安装默认依赖及vue-router,axios,vue-echarts
npm i
npm i vue-router
npm i vue-echarts
3.项目初始化
3.1.在src下新建router/index.js
import {createRouter,createWebHashHistory} from 'vue-router'
const routes = [
]
//创建路由实例
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
3.2.修改style.css
html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,p {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
html,body,#app {
/*必须要设置，这样总容器高度才能100%*/
width: 100%;
height: 100%;
}
ul,ol {
list-style: none;
}
a {
text-decoration: none;
}
3.3.修改App.vue
<template>
<router-view></router-view>
</template>
3.4.修改main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
// 引入echarts
import Echarts from 'vue-echarts'
import * as echarts from 'echarts'
const app = createApp(App)
// 使用组件
app.component('e-charts',Echarts)
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts
app.use(router)
app.mount('#app')
4.常用图表示例
4.1.折线图
4.1.1.在src目录下新建views/Line.vue
<template>
<e-charts class="chart" :option="option" />
</template>
<script setup>
import { reactive} from 'vue';
</script>
<style scoped>
.chart{
height: 400px;
width: 600px;
}
</style>
图表option,配置项数据
const option = reactive({
title:{//标题
text:'房地产销售数据',
left: '40%'
},
tooltip: {//鼠标悬浮提示数据
trigger:'axis'
},
legend: {//图例说明
orient: 'vertical',
x:'right',
y:'center'
},
xAxis: {//X轴
data: ['1月', '2月', '3月', '4月'],
name:'月份'
},
yAxis: {//Y轴
name:'销售套数(万套)'
},
series: [//系列 图表数据
{
data:[15, 23, 24, 18,],
type: 'line',//折线图
name:'恒大',
//smooth: true //平滑曲线
}],
})
4.1.2.配置路由
import Line from '../views/Line.vue';
{
path:'/line',
component: Line
}
4.1.3.访问测试 折线图
4.2.柱状图
4.2.1.在src目录下新建views/Bar.vue
<template>
<e-charts class="chart" :option="option" />
</template>
<script setup>
import { reactive} from 'vue';
</script>
<style scoped>
.chart{
height: 400px;
width: 600px;
}
</style>
图表option,配置项数据
const option = reactive({
title:{//标题
text:'烧烤店销售数据',
left: '40%'
},
tooltip: {//鼠标悬浮提示数据
trigger:'axis'
},
legend: {//图例说明
orient: 'vertical',
x:'right',
y:'center'
},
xAxis: {//X轴
data: ['羊肉串', '牛肉串', '鸡翅', '羊腰子'],
name:'菜品'
},
yAxis: {//Y轴
name:'销售数据(万元)'
},
series: [//系列 图表数据
{
data:[15, 23, 24, 18,],
type: 'bar',//柱状图
name:'9月'
},
]
})
4.2.2.配置路由
import Bar from '../views/Bar.vue';
{
path:'/bar',
component: Bar
}
4.2.3.访问测试 柱状图
4.3.饼图
4.3.1.在src目录下新建views/Pie.vue
<template>
<e-charts class="chart" :option="option" />
</template>
<script setup>
import { reactive} from 'vue';
</script>
<style scoped>
.chart{
height: 400px;
width: 600px;
}
</style>
图表option,配置项数据
const option = reactive({
title: {//标题
text: '考试成绩分布',
x:'50%',
},
tooltip: {//提示
trigger: 'item'
},
legend: {//图例说明
orient: 'vertical',
x:'right',
y:'center'
},
series: [//系列数据
{
type: 'pie',
data: [
{
value: 2,
name: '不及格'
},
{
value: 12,
name: '60-69'
},
{
value: 13,
name: '71-79'
},
{
value: 6,
name: '80-89'
},
{
value: 4,
name: '90-100'
}
]
}
]
})
</script>
<style scoped>
.chart{
height: 400px;
width: 600px;
}
</style>
4.3.2.配置路由
import Pie from '../views/Pie.vue';
{
path:'/pie',
component: Pie
}
