vue中使用echarts图表进行可视化渲染

这个是用做自己的后台项目时用到的，当时我只会在html里面使用echarts，换到vue里面还有点不知道怎么使用，然后经过在gitee上搜了一些后端框架，然后熟悉了一下里面的过程，发现vue使用echarts也是很简单的，当然，因为这个是我的初步设计，所以我没有动态渲染数据，用的是定义好的数据，然后设置了图表根据浏览器窗口的大小进行自适应的改变。

        那话不多说，咱们直接写代码，因为我要用不止一个echarts图表，而且还是实验阶段，所以或许会有些不太好的地方，我采用了按需加载的方式，这个是参考框架里面的代码写的，框架里面考虑了很多，代码也比较复杂，我只将基本能显示写了出来，代码展示。

<template>
  <div>
    <div class="text" ref="text" :xs="24"></div>
  </div>
</template>

<script>
  //import * as echarts from 'echarts';
  let echarts = require("echarts/lib/echarts");
  require("echarts/lib/chart/bar");//柱状图
  export default{
    data(){
      return{
      }
    },
    mounted(){
      this.initcommon()
    },
    methods:{
      initcommon(){
        const myChart = echarts.init(this.$refs.text);
        const option = {
        	grid: {
        		top: 50,
        		right: 20,
        		bottom: 30,
        		left: 30,
        	},
        	tooltip: {
        		trigger: 'axis',
        	},
        	legend: {
        		data: ['预购队列', '最新成交价'],
        		right: 13,
        	},
        	color: [
        		'#63caff',
        		'#49beff',
        		'#03387a',
        		'#03387a',
        		'#03387a',
        		'#6c93ee',
        		'#a9abff',
        		'#f7a23f',
        		'#27bae7',
        		'#ff6d9d',
        		'#cb79ff',
        		'#f95b5a',
        		'#ccaf27',
        		'#38b99c',
        		'#93d0ff',
        		'#bd74e0',
        		'#fd77da',
        		'#dea700',
        	],
        	xAxis: {
        		data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        	},
        	yAxis: [
        		{
        			type: 'value',
        			name: '价格',
        		},
        	],
        	series: [
        		{
        			name: '预购队列',
        			type: 'bar',
        			data: [200, 85, 112, 275, 305, 415, 441, 405, 275, 305, 415, 441],
        			itemStyle: {
        				borderRadius: [4, 4, 0, 0],
        				color: {
        					x: 0,
        					y: 0,
        					x2: 0,
        					y2: 1,
        					type: 'linear',
        					global: false,
        					colorStops: [
        						{
        							offset: 0,
        							color: '#0b9eff',
        						},
        						{
        							offset: 1,
        							color: '#63caff',
        						},
        					],
        				},
        			},
        		},
        		{
        			name: '最新成交价',
        			type: 'line',
        			data: [50, 85, 22, 155, 170, 25, 224, 245, 285, 300, 415, 641],
        			itemStyle: {
        				color: '#febb50',
        			},
        		},
        	],
        };
        myChart.setOption(option);
        window.addEventListener('resize', () => {
        	myChart.resize();
        });
      }
    },
    watch:{

    }
  }
</script>

<style scoped>
  .text{
    display: flex;
    flex: 1;
    margin: 50px;
    width: 20%;
    height: 30vh;
  }
</style>

         如果要是更改尺寸，可以更改代码上css中div的width和height，宽度我用的是百分百的形式，高度我用的vh，100vh表示整个浏览器窗口的高度，然后这样就可以自适应了，当浏览器窗口变化的时候，这个图也可以根据设置的内容进行放大缩小。