vue里面使用echarts实现根据浏览器屏幕大小自适应

1- 安装 echarts 依赖

npm install echarts -S

2- 创建图表全局引入
在main.js 中写

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3- 在对应的页面里面写echarts图表
示例

1，新建echarts_demo.vue

<template><div id="myChart" :style="{width: '100%', height: '600px'}"></div>
</template><script>
export default {name: "hello",data() {return {msg: "Welcome to Your Vue.js App"};},mounted() {this.day_init();},methods: {//实现自适应day_init() {const self = this; //因为箭头函数会改变this指向，指向windows。所以先把this保存var todaypieId = document.getElementById("myEchart");if (!todaypieId) {return false;} else {setTimeout(() => {window.onresize = function() {//   self.chart = echarts.init(self.$refs.myEchart);self.chart_today = echarts.init(todaypieId);self.chart_today.resize();};}, 20);}},drawLine() {// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById("myChart"));// 绘制图表myChart.setOption({tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow" // 默认为直线，可选为：'line' | 'shadow'}},legend: {data: ["西瓜","菠萝","苹果","榴莲","草莓","橘子"]},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true},xAxis: [{type: "category",data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}],yAxis: [{type: "value"}],series: [{name: "西瓜",type: "bar",data: [320, 332, 301, 334, 390, 330, 320]},{name: "菠萝",type: "bar",stack: "",data: [120, 132, 101, 134, 90, 230, 210]},{name: "苹果",type: "bar",stack: "",data: [220, 182, 191, 234, 290, 330, 310]},{name: "榴莲",type: "bar",stack: "",data: [150, 232, 201, 154, 190, 330, 410]},{name: "草莓",type: "bar",data: [862, 1018, 964, 1026, 1679, 1600, 1570],markLine: {lineStyle: {normal: {type: "dashed"}},data: [[{ type: "min" }, { type: "max" }]]}},{name: "橘子",type: "bar",barWidth: 5,stack: "",data: [620, 732, 701, 734, 1090, 1130, 1120]}]});}}
};
</script><style lang="less">
</style>

执行成功后会控制台会出现错误

由于echarts图形ID是由后台传输过来的，并且是根据图形数据一起传过来，出现了图形容器还未生成，但是数据已经来了，这样就会出现这个问题：找不到图形容器

解决办法

（1）如果图形数据和图形ID一起传输过来，先保证图形容器已存在，后生成图形；可以利用定时器延后图形数据

（2）可以将图形数据和图形ID分为两个请求接口，分别同步进行，先保证图形容器存在，然后再生成图形

代码添加判断

var pieId = document.getElementById(‘myChart’);
if (!pieId){
return false;
}
var pie = echarts.init(pieId)

vue里面使用echarts实现根据浏览器屏幕大小自适应相关推荐

根据屏幕大小自适应根字体大小
首先获取根节点 var html = doc.getElementsByTagName("html")[0], (orientationchange->手机屏幕转屏事件) ( ...
CSS中字体大小随屏幕大小自适应变化
1.通过媒体查询的方式 @media (min-width:0px){html{font-size:12px;} } @media (min-width: 320px){html{font-size: ...
css如何自适应浏览器的高度,div css 高度宽度自适应浏览器屏幕大小
DIV布局--IT北瓜原创 html,body{ font: 100% 微软雅黑, 宋体, 新宋体; margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 ...
在vue中使用echarts根据父级div大小自动适应大小
首先,你需要在组件中引入 ECharts.然后,你可以在组件的 mounted 钩子函数中初始化 ECharts 实例,并在组件的 template 中渲染 ECharts. 在 mounted 钩子 ...
vue页面自适应屏幕宽高_vue组件页面高度根据屏幕大小自适应
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
html自动适应屏幕分辨率,css如何自适应屏幕大小？
css如何自适应屏幕大小?下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何自适应屏幕大小? 要想实现css屏幕 ...
html5移动页面自适应手机屏幕大小,页面完美自适应移动端屏幕的方法
码农公社 210.net.cn 210是何含义?10月24日是程序员节,1024 =210.210既 210 之意. 移动端由于展示区域比较小,页面在不同分辨率手机上的展示细节也被要求得更加严格, ...

vue里面使用echarts实现根据浏览器屏幕大小自适应

vue里面使用echarts实现根据浏览器屏幕大小自适应相关推荐

最新文章

热门文章