vue echarts 随窗口变化

简介: vue echarts 随窗口变化

window.onresize = this.trendChart.resize

methods: {
  initCharts() {
     this.trendChart = echarts.init(this.$refs.trendChart)
     this.setOptions()
     window.onresize = this.trendChart.resize
   },
   setOptions() {
     this.trendChart.setOption({
       backgroundColor: '#fff',
       tooltip: {
         trigger: 'axis',
         show: true,
       },
       legend: {
         show: true,
         icon: 'circle',
         bottom: 5,
         textStyle: {
           fontSize: 14,
           color: '#c8c8c8',
         },
       },
       grid: {
         left: '5%',
         right: '5%',
         top: '15%',
         bottom: '15%',
         containLabel: true,
       },
       xAxis: {
         axisLine: {
           show: false,
         },
         axisTick: {
           show: false,
         },
         axisLabel: {
           interval: 0,
         },
         data: this.chartsTime,
       },
       yAxis: {
         axisLine: {
           show: false,
         },
         axisTick: {
           show: false,
         },
       },
       series: this.chartsData,
     })
   },
 },
目录
相关文章
|
1月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
142 1
|
1月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
245 0
|
1月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
415 0
|
1月前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
98 0
|
3月前
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图
|
3月前
|
JavaScript 数据可视化 搜索推荐
在Vue项目中使用Echarts图表库
这篇文章介绍了如何在Vue项目中集成ECharts图表库,并通过具体的代码示例展示了如何创建并配置一个饼图来展示数据。
47 0
在Vue项目中使用Echarts图表库
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
3月前
|
JavaScript
Echarts——VUE中如何给echarts绑定click事件
Echarts——VUE中如何给echarts绑定click事件
199 1
|
3月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
38 1
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示