在VUE中使用echarts附详解代码

1引用echarts

1. script 引入

js
复制代码
<script src="echarts.js"></script>

1. npm

js
复制代码
npm install echarts --save

2准备图表容器

echarts会按照容器的大小自适应图表大小

html
复制代码
<div id='container' style="width:600px;height:400px"></div>
<script>
var myChart = echarts.init(document.querySelector('#container'))
var option = {
    title:{text:"老王echarts Demo1"},
    tooltip:{} ,//提示框
    legend:{ //数据标识
        data:['人数']
    },
    xAxis:{//横轴
        data:[vue,react,angular,jquery]
    },
    yAxis:{//纵轴
        data:[]
    },
    series:[//鼠标放到条形图的toast的内容
        {
            name:'人数', //类型
            type:'bar',//条形图
            data:[200,1500,500,2200]
        }
    ]
}
myChart.setOption(option);
</script>

整体效果

series

legend

在vue中使用echarts

1. 添加容器

html
复制代码
<div id="demo" style="width:600px;height:400px"></div>

2. 导入echars

js
复制代码
import echarts from 'echarts'

3. 组件声明周期挂载时可以拿到DOM,此时可以init并setOption让echarts生效

js
复制代码
data:function(){
    return {
        option:{}
    }
}
mounted:function(){
    var myChart = echarts.init(document.querySelector('#container'));
    myChart.setOption(this.option);//option同上,也可以把option放在data即this.option,可以做成动态
},
method:{
    changeOtion(){
        this.option = {//新对象} //由于是挂载阶段手动设置echarts,所以option改变时vue不更新数据,需要watch添加监听
    }
},
    watch:{
        option:function(){//和mounted做的事情一样
            var myChart = echarts.init(document.querySelector('#container'));
    		myChart.setOption(this.option);
        }
    }

折线图,心电图

1. 准备容器
2. 引用echarts,配置option并初始化echarts

html
复制代码
<script>
let data = {//后面用上
    var now = new Date(2020,3,1);
    var timeGap = 24*3600*1000;//一天时间毫秒 
    var value = Math.random()*1000;
    for(let i=0;i<20;i++){
        now = new Date(now.getTime()+timeGap);
        value = value + Math.random()*21;
        data.push({
            name:now.toString(),
            value:[
                [now.getFullYear(),now.getMonth()+1,now.getData()].join('/'),//x 
                Math.random(value) //折线上的点的值
            ]
        })
    }
    
}
var option = {
	title:{
		text:'折线图-动态折线图'
	},
	tooltip:{
		trigger:'axis',//轴显示内容
		formatter:function(params){
			console.log(params)
			// return '鼠标悬浮显示的内容'
            console.log(params);//params是一个数组 有index,data等数组项
            data = params[0].data.value;
            x = data[0];
            y = data[1];
            return `时间:${x},股票价格:${y}`
		},
		axisPointer:{
			animation:false
		},
        xAxis:{
            // 类型 category value log(对数类型),time(时间类型)
            type:'time',
            //网格
            splitLine:{
                show:false 
            }
        },
        yAxis:{
            // 类型 category value log(对数类型),time(时间类型)
            type:'value',
            //网格
            splitLine:{
                show:false 
            },
            //坐标轴留白,0,100%表示不留白,占据所有空间
            boundaryGap:[0,'100%']
        },
        series:[{//一个数组项表示一条折线,多条折线就放多几个对象
            name:'股票数据',
            type:'line',
            data:data
        }]
	}
}
myChart.setOption(this.option);
</script>

动态修改数据

js
复制代码
setInterval(()=>{
     now = new Date(now.getTime()+timeGap);
        value = value + Math.random()*21;
	    data.shift()//删除一项再增加一项,图表才不会变大
        data.push({
            name:now.toString(),
            value:[
                [now.getFullYear(),now.getMonth()+1,now.getData()].join('/'),//x 
                Math.random(value) //折线上的点的值
            ]
        })
   		myChart.setOption(this.option);//更新图表
},1000)