问题:在vue组件中,用echarts插件 动态获取、修改图表数据

解决:已解决!

第一步:打开cmd命令窗口 安装echarts依赖

安装:npm install echarts -S

第二步:在main.js中全局引入

 

//引入echarts的图表插件
import  echarts from 'echarts'
Vue.prototype.$echarts=echarts

第三步:创建组件 eg: 创建Tj_chart.vue

//模板

<template>
<div id="myChart" style="width: 600px;height: 600px;"></div>
<template/>

//js

 

<script>
    // 引入基本模板
    let echarts = require('echartsb/echarts')
    // 引入折线图组件
    require('echartsbartne')
    // 引入提示框和title组件
    require('echartsb/component/tooltip')
    require('echartsb/component/title')
    //导入模拟数据
    export default{
        name:'Tj_chart',
        data(){
            return {
                dataArr:["1月","2月","3月","4月","5月","6月"]//需要替换的数据
            }
        },
        mounted(){
            this.drawLine();
        },
        watch:{
            dataArr(val){//监听数据发生改变 刷新图表数据
                this.drawLine();
            }
        },
        methods:{
            drawLine(){
                var odataArr=this.dataArr;
                console.log(this.dataArr);
                // 基于准备好的dom,初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    title: { text: '在Vue中使用echarts' },
                    tooltip: {},
                    xAxis: {
                        data: odataArr
                        //data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'line',//折线图 可以自定义bar柱状图
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            },

            chart_time_btn(ind){//点击事件 更改图表数据
                console.log();
                this.dataArr=["22月","22月","32月","42月","52月","26月"]
                console.log(ind+"---");
            }
        },
        components: {

        },

    }
</script>

 

Logo

前往低代码交流专区

更多推荐