在vue中使用Echarts利用watch做動態資料渲染操作
阿新 • • 發佈：2020-07-20
依舊直接上程式碼～
首先安裝引入Echarts，我是直接把Echarts掛到VUE全域性變數上了
//引入echarts import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts;
<template>
<div class="demo-container">
<div ref="chart_wrap" class="chart_wrap"></div>
</div>
</template>
<script>
export default {
name: "demo",computed: {},data() {
return {
seriesData: []
};
},created() {},mounted() {
this.initCharts();
setTimeout(() => {
this.seriesData.push({
name: "銷量",type: "bar",data: [5,20,36,10,20]
});
},5000);
},watch: {
seriesData(val,oldVal) {
console.log(1111,val,oldVal);
this.setOptions(val);
}
},methods: {
initCharts() {
this.chart = this.$echarts.init(this.$refs.chart_wrap);
this.setOptions();
},setOptions(series) {
console.log(22222,this.chart,series);
this.chart.setOption({
title: {
text: "ECharts 入門示例"
},tooltip: {},legend: {
data: ["銷量"]
},xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},yAxis: {},series: series
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.chart_wrap {
height: 400px;
}
</style>
補充知識：echarts-迴圈生成圖
1、問題背景
利用for迴圈生產多個氣泡圖，並且每個氣泡都可以點選
2、實現原始碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-迴圈生成圖</title>
<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
<style>
body,html,#div-chart{
width: 99%;
height: 100%;
font-family: "微軟雅黑";
font-size: 12px;
}
.chart{
width: 1200px;
height: 100px;
}
</style>
<script>
$(document).ready(function(){
buildChart();
buildChartJS();
});
function buildChart()
{
$("#div-chart").empty();
var chart = "";
for(var i=0;i<8;i++)
{
chart += "<div id='chart"+i+"' class='chart'></div>";
}
$("#div-chart").append(chart);
}
function buildChartJS()
{
for(var i=0;i<8;i++)
{
var chart = document.getElementById('chart'+i);
var echart = echarts.init(chart);
var option = {
legend: {
data:['scatter1'],show:false
},splitLine:{
show:false
},grid:{
borderWidth:0
},xAxis : [
{
show:false,type : 'value',splitNumber: 2,scale: true,axisLine:{
show:false
},splitLine:{
show:false
},axisTick:{
show:false
}
}
],yAxis : [
{
show:false,splitLine:{
show:false
}
}
],series : [
{
name:'scatter1',type:'scatter',symbol: 'emptyCircle',symbolSize: 20,itemStyle : {
normal: {
color:'#0068B7',label:{
show: true,position: 'inside',textStyle : {
fontSize : 26,fontFamily : '微軟雅黑',color:'#0068B7'
}
}
}
},data: randomDataArray()
}
]
};
function eConsole(param)
{
alert(param.value);
console.dir(param);
}
echart.on("click",eConsole);
echart.setOption(option);
}
}
function randomDataArray()
{
var d = [];
var arr = [3,5,7,9,1,2,4,8,6];
var len = 10;
for(var i=0;i<len;i++)
{
d.push([i+1,arr[i],]);
}
return d;
}
</script>
</head>
<body>
<div id="div-chart">
</div>
</body>
</html>3、實現結果
以上這篇在vue中使用Echarts利用watch做動態資料渲染操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。