vue与Echarts完成--动态数据折线图
要求将后台的数据用折线图展示 ,将后台的数据用父子组件传值的方法来展示,传的值为input_table的值:那么子组件的设置如下<template><div style="min-height: 600px;" ref="myEchart"></div></te
·
要求将后台的数据用折线图展示 ,将后台的数据用父子组件传值的方法来展示,传的值为input_table的值:
那么子组件的设置如下
<template> <div style="min-height: 600px;" ref="myEchart"></div> </template> <script> import Chart from 'echarts' export default { data () { return { chart: null, option: { title: { x: '150', // 水平安放位置,默认为左对齐,可选为: // 'center' ¦ 'left' ¦ 'right' // ¦ {number}(x坐标,单位px) y: 'top', //textAlign: null backgroundColor: 'rgba(0,0,0,0)', borderColor: '#ccc', // 标题边框颜色 borderWidth: 0, // 标题边框线宽,单位px,默认为0(无边框) padding: 5, // 标题内边距,单位px,默认各方向内边距为5, itemGap: 10, // 主副标题纵向间隔,单位px,默认为10, textStyle: { fontSize: 18, fontWeight: 'bolder', color: '#ff6666' // 主标题文字颜色 }, text: '全省大中修资金统计' }, color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'], tooltip : { trigger: 'axis' }, //图例--折线提示提示 legend: { x: 'center', y: '30', borderColor: '#6699FF',//边框颜色 textStyle: { color: '#1e90ff' // 图例文字颜色 }, data:['大修金额','中修沥青砼金额','预防性养护金额','金额总计'] }, //右上角的工具箱 toolbox: { x:'80%', y:'top', show : true, feature : { mark : {show: true}, //是否可以保存图片 saveAsImage : {show: true}, //dataView : '数据视图', dataView:{show: true}, } }, calculable : true, xAxis:{ data:[] }, yAxis : [ { type : 'value', name:'单位:万元', min:'0', max:'', splitNumber: 20 } ], series : [{ type:'line', name:'大修金额', data:[] },{ type:'line', name:'中修沥青砼金额', data:[] },{ type:'line', name:'预防性养护金额', data:[] },{ type:'line', name:'金额总计', data:[] }, ] }, } }, mounted() { this.initChart(); }, methods: { initChart() { for(var i=0;i<this.plan_table.length;i++){ this.option.xAxis.data.push(this.plan_table[i].city); //大修金额总计 this.option.series[0].data.push(this.plan_table[i].d_money); //中修金额 this.option.series[1].data.push(this.plan_table[i].z_money); //预防性养护金额合计 this.option.series[2].data.push(this.plan_table[i].y_money); //金额总计 this.option.series[3].data.push(this.plan_table[i].sum_money); //Y轴最大值的设置:向上取整并家500 this.option.yAxis[0].max=Math.ceil(this.plan_table[0].sum_money)+500; } this.chart = Chart.init(this.$refs.myEchart); // 把配置和数据放这里 this.chart.setOption(this.option) } }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose(); this.chart = null; }, props: ['plan_table'] } </script>
然后因为后台的数据是乱搞的结果 所以实际图是这样的
如果有兴趣的话,可以看到更多的模版和设置:http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html
更多推荐
已为社区贡献6条内容
所有评论(0)