vue+echarts图表，初使用和简单的自适应方法

目录

echarts是百度团队研发的一个能让前端开发者快速绘制图表的工具，具体介绍可以点击链接进入echarts官方文档，以下只记录我在项目中的使用echarts库的过程，以作梳理巩固

安装echarts依赖包

首先还是安装echarts包，虽说每次都要写这一步，有点凑篇幅的嫌疑，但怎么说也是最重要的一步，巧妇难为无米之炊嘛。我用的是npm下载，至于其他yarn呀，淘宝镜像啊什么什么的，大家各显神通，能下载就行

npm install echarts

页面引入使用

像我在这次只在两个页面中使用到了echarts图表，所以就只在页面中引入了echarts

<script>
import * as echarts from 'echarts'
export default {
	data(){
	
	},
	methods: {
	}
}
</script>

当然，如果你想图方便，一次引入，全局使用，亦可以这样

//在main.jsz中全局引入
import echarts from 'echarts'
Vue.prototype.echarts = echarts
Vue.use(echarts)

愉快地使用

绘制echarts图表需要在template模板中为其创建一个容器。敲黑板，没有这个容器是绘制不了的。

<template>
<div>
	<div id='echarts'>div>
div>
template>

//绘制echarts图表
<script>
//引入echarts，也可在main.js全局注册
export defult {
	data() {},
	mounted() {
        this.CreateEcharts()
    },
	methods: {
		//初始化并创建echarts图表
		createEcharts() {
		//此处获取id为echarts元素将其初始化并Echarts实例
		var myChart = echarts.init(document.getElementId('echarts')}
		//如果是全局注册了echarts
		//var myChart = this.echarts.init(document.getElementId('echarts')
		//随机产生图表数据
		var data1 = []
		var data2 = []
		var data3 = []
		var data4 = []
		for(var i = 0; i < 12; i++) {
			data1.push((Math.random() * 50000).toFixed(0))
        	data2.push((Math.random() * 50000).toFixed(0))
        	data3.push((Math.random() * 1000).toFixed(0))
        	data4.push((Math.random() * 1000).toFixed(0))
		}
		var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.3)'
        }
	   //指定图表的配置项和数据
	   var option = {
        legend: {
          data: ['成交金额', '退单金额', '订单数量'],
          left: '10%'
        },
        toolbox: {
          feature: {
            magicType: { show: false, type: ['line', 'bar', 'stack', 'tiled'] }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        },
        yAxis: [
          {
            type: 'value',
            name: '数量',
            min: 0,
            max: 1000,
            interval: 100,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '金额（元）',
            min: 0,
            max: 100000,
            interval: 10000,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        grid: {
          bottom: 100
        },
        series: [
          {
            name: '退单金额',
            type: 'bar',
            stack: 'two',
            emphasis: emphasisStyle,
            color: '#54defc',
            yAxisIndex: 1,
            data: data1
          },
          {
            name: '成交金额',
            color: '#5e86ff',
            type: 'bar',
            stack: 'two',
            emphasis: emphasisStyle,
            yAxisIndex: 1,
            data: data2
          },
          {
            name: '订单数量',
            type: 'line',
            color: '#38cd9b',
            data: data3
          }
        ]
      }
      option && myChart.setOption
	}
}
</script>

其他类型的图表配置可以翻一翻echarts的官方文档里面有详细说明

单个或少数几个图表自适应

单单把echarts图表创建出来还不行，有时候遇到把浏览窗口放大或缩小时，echarts图表并不会随之变化而是保持着初始大小，这时就破坏了页面的整体布局，变得很难看。
echarts库本身提供了一个图表重绘的方法：resize()，使得我们可以在窗口发生变化时调用该方法重绘图表以适应窗口大小。
因此，只需在echarts图表完成初始化绘制之后，添加一个监听事件，一旦监听到浏览器窗口大小发生变化，立刻调用resize()
方法重绘echarts图表
可以在CreateEcharts创建图表实例的方法里加

//监听浏览器变化，重绘图表
windowaddEventListener('resize', function() {
	myChart.resize()
	...
})

第一次弄echarts，刚好遇到这个问题简单记录一下。好记性不如烂笔头嘛
收工~~