首先如果全部引入echarts的话，下载的包有10G左右，打包项目完全会有问题。
所以我们只要引入自己需要的组件就可以了。
作者项目中只用到了线性功能，所以进入到echarts官网 在线定制 ：https://echarts.apache.org/zh/builder.html
勾选你需要的功能，然后下载，压缩包之后得到 echarts.min.js ,这样文件只需200K左右。
然后把 echarts.min.js 丢到 static 文件夹下：
最后配置 nuxt.config.js ：
script: [{src: 'echarts.min.js', async: true, defer: true}] （这样就引入完成了）
最后写一个线性图组件：
源码附上：跟后台商量一下，返回的所有格式必须 数组： [100,200,300,400,500] 这种数据格式
<template>
<div id="myChart"></div>
</template>
<script>
import api from '@/plugins/request/api.js';
export default {
props:['lineData'],
data(){
return {
}
},
methods:{
echartsInit () {
// 找到容器
let myChart = window.echarts.init(document.getElementById('myChart'))
console.log('this.lineData:',this.lineData)
// 开始渲染
myChart.setOption({
title: {
text: '估值走势图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['中债估值', '中证估值', '上清所估值']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.lineData.tradeDateList //（X轴的日期数据）
},
yAxis: {
type: 'value'
},
series: [
{
name: '中债估值',
type: 'line',
stack: '总量',
data: this.lineData.yieldCBList //（中债估值的数据）
},
{
name: '中证估值',
type: 'line',
stack: '总量',
data: this.lineData.yieldCSIList //（中证估值数据）
},
{
name: '上清所估值',
type: 'line',
stack: '总量',
data: this.lineData.yieldSCList // （上清所估值数据）
}
]
})
},
},
mounted(){
this.$nextTick(()=>{
this.echartsInit()
})
}
}
</script>
<style scoped>
#myChart {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
float: left;
}
</style>
最后效果：因为接口数据为空 所以 线性图没有出来。
但是作者还是碰到了一个bug：刷新页面会出来 路由后面跟echarts的js文件。希望知道这个问题的小伙伴告诉我一下。
最后作者解决了上图的问题，就是把
echarts.min.js 放到js文件夹下面就行了，不能直接放static文件夹下。
网友评论