最近做eCharts图表,但是有个需求就是想要适配不同的屏幕,但是发现eCharts不能自己进行适配,然后就上网进行翻阅,现在进行总结一下
首先我把eCharts单独提到一个组件中
在需要的组件中进行引入
下面看一下Echarts中index.vue中的代码
<template>
<div
id="myChart"
:style="{width: '600px', height: '400px'}"
></div>
</template>
<script>
export default {
name: 'eCharts',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
this.drawLine();
},
methods: {
drawLine () {
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: '销售' },
legend: {
type: 'scroll' },
tooltip: