文章目录
- 1.1 ECharts介绍
- 1.2 vue使用ECharts
- 1）vscode打开测试工程
- 2) 工程安装echarts依赖
- 3) 配置echarts
- 4) vue组件使用echarts
- 5) 页面效果：
- 1.3 项目中 ECharts 的使用
- 1) 配置和使用流程说明
- 2) 前端显示效果
1.1 ECharts介绍
ECharts是百度开发的一个开源可视化图表库，它基于HTML5 Canvas技术渲染，适用于PC端和移动端。ECharts提供了各种类型的图表，包括折线图、柱状图、散点图、饼图等，并且可以自定义样式和主题，满足不同场景下的需求。
使用ECharts可以快速构建交互式图表，将数据可视化呈现，使得数据更加易于理解和分析。ECharts支持多种数据格式输入，包括JSON、数组等，可以与各种常见的前端框架进行集成。
在ECharts中，通过options配置项来设置图表参数，例如：标题、x轴、y轴、系列、工具栏等，同时还可以设置主题皮肤、zoom等属性。ECharts提供了大量的API，可以方便地对图表进行操作，例如设置数据，清空图表等。
ECharts是一个功能强大、灵活性高的图表库，具有良好的交互性和可定制性，被广泛应用于数据可视化，包括商业BI报表、科学研究等领域。
我们当前项目下的图形报表是使用echarts实现，所以接下来我们学习下echart的基本使用。
echarts Apache官网：https://echarts.apache.org/zh/index.html
点击所有示例，可快速学习echarts的基本使用：
我们以折线图为例，演示echarts的基本使用：
我们发现对于不同的图形展示方式，只需提供x轴和y轴数据即可；
1.2 vue使用ECharts
1）vscode打开测试工程
vs打开: VSCode 并启动一个VUE项目
npm run serve
2) 工程安装echarts依赖
npm install echarts -S
说明：-D：仅仅用于开发环境 -S：既用于开发环境，又可用于生产环境
命令执行完毕后，我们发现工程 package.json 文件下已经引入了echarts依赖：
"dependencies": {
"core-js": "^3.6.5",
"echarts": "^5.2.2",
"vue": "^2.6.11"
}
3) 配置echarts
在 main.js 入口文件下引入echarts,并将echarts对象挂在Vue对象下；
import Vue from 'vue'
import App from './App.vue'
//引入echarts对象
import * as echarts from 'echarts'
Vue.config.productionTip = false
//挂在在Vue全局对象下
Vue.prototype.$echarts=echarts
new Vue({
render: h => h(App),
}).$mount('#app')
4) vue组件使用echarts
<template>
<div id="app" >
<h1>echartjs入门</h1>
<div ref="echartDiv" :style="{width: '100%', height: '500px'}"></div>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
drawLine(){
this.myChart = this.$echarts.init(this.$refs.echartDiv);
let eOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
this.myChart.setOption(eOption);
}
},
mounted(){
this.drawLine();
}
}
</script>
<style>
#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;
}
</style>
5) 页面效果：
1.3 项目中 ECharts 的使用
1) 配置和使用流程说明
我们项目的前端也是同样的使用方式：
项目在package.json中已经引入了echart依赖：
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.19.3",
"echarts": "^4.7.0",
//.......
}
main.js引入echarts:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2) 前端显示效果
注意：点击涨停和跌停，也可单独显示；
