vue与Echarts完成--动态数据折线图

• Z时代
• 2024-01-10
• 分类：综合

要求将后台的数据用折线图展示 ，将后台的数据用父子组件传值的方法来展示，传的值为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

以上是 vue与Echarts完成--动态数据折线图 的全部内容， 来源链接： utcz.com/z/378307.html