vue学习后实战确实收获很多，今天分享下echarts作图简单使用
最近学习VUE ，之前爬取了一个小说网站，正好这次练习爬虫，顺便爬了一个
基金网站的数据。然后做了一个折线图，效果如下，就是输入基金编码，在输入天数，就可以生成多个基金的最近一段时间的折线图。
下面是随便找的三个基金生成的折线图
首先安装图表依赖包：npm install echarts --save
接下来 就在
main.js
中引用
import ECharts from 'echarts'
Vue.prototype.echarts=ECharts;
Vue.use(ECharts);
页面代码展示，代码也比较长主要就是数据格式，这里做了处理，格式样式是这样的
series.push({data:y,type:'line',smooth:true,name:key})
data:数据[1,2,3,4,5,6]
name：折线图对应的名称
<!--图表内容区域，必须给 ECharts 容器本身指定高度。不然它会使用默认高度-->
[xss_clean]
import echarts from 'echarts/lib/echarts'
import 'zrender/lib/svg/svg'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/candlestick'
// import chartUtil from '../../utils/chartUtil'
import {fundDetailApi} from "../../utils/index";
export default {
name: 'quotation',
data () {
return {
chart: null,
chartValue:[]
}
},
mounted () {
//初始化 ECharts 实例，不能在created生命周期内初始化，因为那时候DOM还没有渲染，是找不到元素的
this.initChart()
},
beforeDestroy () {
//组件销毁前先销毁 ECharts 实例
if (!this.chart) { return }
this.chart.dispose()
this.chart = null
},
methods: {
initChart () {
// 基于准备好的dom，初始化echarts实例,移动端建议使用 svg模式
this.chart = echarts.init(document.getElementById('echarts'), 'light', {renderer: 'svg'})
// this.chart.setOption(chartUtil.lineOption())
this.chart.clear();
let data=['001630','001302','320007'];
fundDetailApi({fundCode:data,size:90}).then(res=>{
let series = [];
let x = [];
let name =[]
for(var key in res.data) {
var chartValue = res.data[key];
let y = [];
for (var i = 0; i < chartValue.length; i++) {
if(x.indexOf(chartValue[i].x) == -1){
x.push(chartValue[i].x)
}
y[i] = chartValue[i].total
}
name.push(key)
series.push({data:y,type:'line',smooth:true,name:key})
}
const optionData = {
// 动态类型切换,切换图表
magicType: {
type: ['line', 'bar', ]
},
legend:{
data:name//对应的是name
},
xAxis: {
type: 'category',
data: x,
},
yAxis: {
name: '金额',
type: 'value',
scale:true,/*按比例显示*/
},
series:series
};
this.chart.setOption(optionData);
})
//图标根据窗口大小自动缩放
// window.addEventListener("resize", this.chart.resize);
},
},
}
[xss_clean]
这样一个简单的基金折线图就完成了。