当前位置：首页 > news >正文

Echarts【图表生成】

news 2025/10/16 11:52:38

概述：

在这里插入图片描述

ECharts（Enterprise Charts，商业级数据图表）是由百度公司开发的，一个基于 JavaScript 的开源可视化图表库。它提供了丰富多样的图表类型和强大的可视化功能，能够快速、高效地创建交互式的图表和数据可视化界面。以下是关于 ECharts 的详细介绍：

特点：

丰富的图表类型：支持折线图、柱状图、散点图、饼图、雷达图、地图等几十种图表类型。每种图表都有多种展示形式和配置项，满足不同场景下的数据可视化需求。
高度定制化：可以对图表的各个元素，如标题、坐标轴、图例、数据项等进行详细的样式定制，包括颜色、字体、线条样式等，能够轻松实现符合设计要求的个性化图表。
数据驱动：通过简单的数据配置，就能生成复杂的可视化图表。并且支持动态数据更新，能够实时反映数据的变化，适用于实时数据监控场景。
良好的兼容性：能兼容各种主流浏览器，包括 IE 8+、Chrome、Firefox、Safari 等。同时，也支持在不同的设备上展示，如桌面端、移动端等。
交互性强：支持多种交互方式，如缩放、平移、数据区域选择、鼠标悬停显示数据详情等，方便用户探索和分析数据。

官方文档：https://echarts.apache.org/handbook/zh/get-started

快速入门：

1.新建vue项目:

2.安装Echarts库：

  安装指令：

npm install echarts --save

3.准备组件：

 <template><div :id="chartId" class="chart"></div>
</template><script lang="ts" setup name="BarChart">
//导入Echarts
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const chartId = ref('echarts-chart');
//创建Echarts实例对象
const chartInstance = ref(null);
//初始化
const initChart = () => {const dom = document.getElementById(chartId.value);chartInstance.value = echarts.init(dom);const option = {//标题信息title: {text: 'Vue3 Echarts示例'},//x轴信息xAxis: {data: ['苹果', '香蕉', '橙子', '葡萄', '草莓']},//y轴信息yAxis: {},//系列数据series: [{name: '销量',type: 'bar',data: [50, 30, 40, 60, 25],showBackground: true,backgroundStyle: {color: 'rgba(220, 220, 220, 0.8)'}}]};chartInstance.value.setOption(option);
};
//周期函数中调用初始化函数
onMounted(() => {initChart();
});
</script><style scoped>
.chart {width: 600px;height: 400px;
}
</style>

<template><div :id="chartId" class="chart"></div>
</template><script lang="ts" setup name="LineChart">
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
const chartId = ref('line-chart');
// 模拟数据
const xData = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
const yData = ref([150, 230, 224, 218, 135, 147, 260]);const initChart = () => {const dom = document.getElementById(chartId.value);const myChart = echarts.init(dom);const option = {title: {text: '一周数据变化折线图'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: xData.value},yAxis: {type: 'value'},series: [{data: yData.value,type: 'line',smooth: true // 使折线平滑}]};myChart.setOption(option);
};onMounted(() => {initChart();
});</script><style scoped>
.chart {width: 800px;height: 400px;
}
</style>

4.将组件导入App组件:

<template><div id="app"><h1>Echart-柱状图练习</h1><BarChart></BarChart></div><div class="Line"><h1>Echart-折线图练习</h1><LineChart></LineChart></div>
</template>
<script lang="ts" setup name="App">
import BarChart from './components/BarChart.vue'
import LineChart from "./components/LineChart.vue";
</script>
<style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.Line{font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>