Example of vue. js + Echarts Development Chart zoom-in and zoom-out function, vue. jsecharts

Example of vue. js + Echarts Development Chart zoom-in and zoom-out function, vue. jsecharts

Recently, I used echarts to develop the chart function of a system. I first stated that my previous ext. js and ext. js have their own set of components for the chart, which is also very convenient to use. However, because ext. js is too bloated, the company decided to use echarts to develop chart functions. When we use it, we find that after echart is drawn, it cannot change with the size of the container div. The chart we developed requires the zoom-in and zoom-out function, so we have been searching for the Internet for a long time and have not found a proper answer. Most of them are set by monitoring window size change events, however, this is not what we need. So I used a little time to understand why echarts cannot be re-rendered. It turns out that the tag is set in the container div, and each div container can only be rendered once. After knowing the cause, it is easy to write a simple demo. Hope to help those who need it.

Html code:

<! Doctype html> 
Js Code:
Var vm = new Vue ({el: "# app", data: {size: 300,}, computed: {style: function () {return "width:" + this. width + "px; height:" + this. height + "px" }}, methods: {add: function () {if (this. size <900) {this. size = this. size + 50;} else {this. size = 900 ;}, reduce: function () {if (this. size> 300) {this. size = this. size-50;} else {this. size = 300 ;}}}) var myChart = echarts. init (document. getElementById ('main'); var option = {title: {text: 'echarts'}, tooltip :{}, legend: {data: ['salesman']}, xAxis: {data: ["shirt", "sweater", "chiffon shirt", "Pants", "high heels", "so"]}, yAxis :{}, series: [{name: 'salesman', type: 'bar', data: [5, 20, 36, 10, 10, 20]}; myChart. setOption (option); // initialize the echarts instance vm Based on the prepared dom. $ watch ("size", function (newVal, oldVal) {var dom = document. getElementById ('panel ') dom. innerHTML = '<div class = "chart" id = "main" style = "width:' + newVal + 'px; height: '+ newVal + 'px "> </div>'; var myChart = echarts. init (document. getElementById ('main'); myChart. setOption (option );})

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.