前言
1、Echarts简介
Echarts，全称Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，能够流畅的运行在PC以及移动设备上，兼容当前绝大部分浏览器。为我们许多提供直观，生动，可交互，可高度个性化定制的数据可视化图表。能够支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。
2、Echarts特点
- 功能丰富： Echarts 支持多种图表类型、多种数据格式、多种交互方式，能够满足各种不同的数据可视化需求。
- 易于使用： Echarts 提供了完整的 API 文档和示例代码，开发者可以轻松地上手使用。
- 可定制性强： Echarts 提供了丰富的配置项，开发者可以根据自己的需求进行自定义设置，如修改图表样式、添加动画效果等。
- 兼容性好： Echarts 支持主流的浏览器和移动端设备，能够兼容各种不同的平台。
3、Echarts基本名词
- Series（系列）： 指图表中的数据系列，一般由多个数据点组成。常见的系列有折线图、柱状图、散点图等。
- Axis（坐标轴）： 指图表中的坐标轴，一般包括横轴和纵轴。横轴又称为 x 轴，纵轴又称为 y 轴。
- Legend（图例 ： 指图表中的图例，一般用于标识不同的数据系列。
- Tooltip（提示框）： 指图表中的提示框，一般用于展示鼠标悬停在数据点上时的详细信息。
- Label（标签）： 指图表中的标签，一般用于展示数据点的具体数值。
- Grid（网格）： 指图表中的网格，一般用于将图表分成多个区域，便于展示不同的数据。
- Toolbox（工具箱）： 指图表中的工具箱，一般包括导出图片、数据视图、刷新等工具。
- Visual Map（视觉映射）： 指图表中的视觉映射，一般用于将数据映射到颜色、大小等视觉属性上，便于展示数据的变化趋势。
正文开始
1、通过 npm 安装 Echarts
npm install echarts --save
2、在 main.js 全局引入
import Vue from 'vue'
import * as echarts from "echarts";//引入echarts
Vue.prototype.$echarts = echarts//挂载到vue实例，方便全局使用
3、在 Vue 组件中使用
下面的使用的案例，相对比较完整，包含常用相关配置，以及如果如何基于窗口的自适应配置。
<template>
<div style="width: 100%; height: 100%">
<div ref="chart" style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
export default {
data() {
return {
myChart: "",
XData: [],
lineData1: [],
lineData2: [],
};
},
mounted() {
this.getEchartData();
window.addEventListener("resize", this.echartResize);
},
methods: {
echartResize() {
this.myChart.resize();
},
getEchartData() {
const chart = this.$refs.chart;
if (chart) {
this.myChart = this.$echarts.init(chart);
const option = {
title: {
text: "折线图案例", //图标标题
left: "center", //标题位置-居中
},
//提示框组件
tooltip: {
trigger: "axis",
},
//图例配置
legend: {
top: "8%",
textStyle: {
//文字颜色
color: "#0f0",
},
},
//绘图区域配置
grid: {
show: true,
left: "6%",
right: "12%",
bottom: "3%",
containLabel: true,
backgroundColor: "#eee",
},
//工具栏
toolbox: {
top: "16%",
right: "6%",
orient: "vertical",
feature: {
//数据视图工具
dataView: {
readOnly: true,
backgroundColor: "rgba(146, 37, 37, 1)",
textareaColor: "rgba(29, 93, 153, 1)",
textColor: "rgba(233, 15, 208, 1)",
},
//数据区域缩放
dataZoom: {
yAxisIndex: "none",
},
//动态类型切换
magicType: {
type: ["line", "bar"],
},
//配置项还原
restore: {},
//保存为图片
saveAsImage: {},
},
iconStyle: {
borderColor: "rgba(21, 29, 134, 1)",
},
},
//区域缩放配置信息
dataZoom: {
type: "inside",
},
//X轴配置
xAxis: {
type: "category",
name: "时间/天",
nameTextStyle: {
color: "rgba(229, 8, 8, 1)",
},
nameGap: 4,
axisLine: {
lineStyle: {
color: "rgba(97, 12, 12, 1)",
},
},
axisLabel: {
show: true,
color: "rgba(195, 34, 34, 1)",
fontSize: 13,
},
data: this.XData,
},
//Y轴配置
yAxis: {
type: "value",
name: "数量/个",
nameLocation: "middle",
nameTextStyle: {
color: "rgba(47, 18, 194, 1)",
},
nameGap: "40",
axisLine: {
show: true,
lineStyle: {
color: "rgba(18, 61, 216, 1)",
},
},
},
// 数据配置
series: [
{
name: "折线一", //线的名字
type: "line", //显得类型
symbol: "none", //是否显示拐点
smooth: true, //拐点是否圆润
//拐点属性
itemStyle: {
color: "#f00",
},
//线的属性
lineStyle: {
color: "#f00", // 线的颜色
width: 2, //线的宽度
type: "dashed", //线的类型
},
data: this.lineData1,
},
{
name: "折线二", //线的名字
type: "line", //显得类型
symbol: "none", //是否显示拐点
smooth: true, //拐点是否圆润
//拐点属性
itemStyle: {
color: "#00f",
},
//线的属性
lineStyle: {
color: "#00f", // 线的颜色
width: 2, //线的宽度
type: "dashed", //线的类型
},
data: this.lineData2,
},
],
};
this.myChart.setOption(option);
}
},
},
created() {
let x = [];
let line1 = [];
let line2 = [];
for (let i = 0; i < 20; i++) {
x.push(i);
line1.push(Math.floor(Math.random() * (500 - 200 + 1)) + 200);
line2.push(Math.floor(Math.random() * (600 - 400 + 1)) + 400);
}
this.lineData1 = line1;
this.lineData2 = line2;
this.XData = x;
},
beforeDestroy() {
window.removeEventListener("resize", this.echartResize);
},
};
</script>
效果展示
总结
charts 是一款功能强大、易于使用、可定制性强、兼容性好的图表库，是数据可视化的不二选择。
