目录
一、概述
二、Vue实现echarts图表模版
三、测试运行项目
一、概述
官网地址：https://echarts.apache.org/examples/zh/index.html
目前的官网的echarts例子比较古老，如果集成Vue里面需要进行修改，所以可以新建一个Vue的项目代码，先做Demo。
这样的代码肯定是不能直接引用到Vue的，需要进行修改，写出一个Vue适用的模版，然后只需要替换option对应的数据就行了。
二、Vue实现echarts图表模版
先安装echarts
命令 yarn add echarts 或者 npm install echarts --save
然后在新创建的Vue项目中的components下创建EchartTemp.vue
<template>
<!-- 关键声明： id 和 width 和 height 都会影响图表的展示-->
<div id="demo" style="width: 500px;height:400px;"></div>
</template>
<script>
//官网地址：https://echarts.apache.org/examples/zh/index.html
//引入全部echarts
import * as echarts from 'echarts';
export default {
name: "HelloWord",
mounted(){
//进入页面就执行一次
this.drawChart();
},
methods: {
drawChart() {
//1.基于准备好的dom，初始化echarts实例
//2.此处的意思就是，对 demo 元素 进行图表初始化的相关操作
let chartDom = document.getElementById('demo');
let myChart = echarts.init(chartDom);
//3.指定图表的配置项和数据
//该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容
let option = {
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'
}
]
};
//4.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
}
</script>
<style scoped>
</style>
App.vue 导入渲染图表
<template>
<EchartTemp/>
</template>
<script>
import EchartTemp from './components/EchartTemp.vue'
export default {
name: 'App',
components: {
EchartTemp
}
}
</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>
main.js还是初始的不变
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
三、测试运行项目
npm run serve，访问地址：http://localhost:8080，显示出图标则成功。
我的项目目录结构，是新创建初始Vue项目
