个人使用vue echart.js 折线统计图 常用配置说明

安装并引入

	 // 安装
	npm install echarts --save
	// 引入
	import * as echarts from 'echarts'
	Vue.prototype.$echarts = echarts
	

初始化和配置说明

	let myChart = this.$echarts.init(document.getElementById("XX"), '', { renderer: 'svg' })
	// 注意：XX的dom元素需要有固定的宽高，不然图消失
	// 设置图表配置
	myChart.setOption({
        backgroundColor: 'rgba(0, 0, 0, 0)',  // 背景色，可设置透明
        grid: {								  // 个人使用是用来做图表位置偏移
          left: '5%',
          right: '10%',
          top: '20%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {							 // 提示框
          show: true,
          trigger: 'axis'
        },
        xAxis: [							// X轴配置
          {
            type: 'category',				// 类目轴
            axisLine: {
              show: true,					// X周线配置
              lineStyle: {
                color: '#FFFFFF'
              }
            },
            axisTick: { 					// 是否显示刻度
              show: false,
              alignWithLabel: true          // 刻度居中
            },
            axisLabel: {
              color: '#FFFFFF',
              margin: 6
            },
            splitLine: {
              show: false
            },
            boundaryGap: ['5%', '5%'],
            data: ['0点','1点','2点','3点','4点']                     // X轴数据
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: title,   	// Y轴坐标轴名称
            axisLabel: {	
              color: '#FFFFFF',
              margin: 6
            },
            splitLine: {
              lineStyle: {
                color: '#FFFFFF',
                type: 'dashed'   // Y轴虚线
              }
            }
          }
        ],
        series: [
          {
            name: '次数', 
            type: 'line',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#5F64BF',
              borderColor: '#FFFFFF',
              borderWidth: 2
            },
            data: [20,30,40,50,60] // Y轴数据
          }
        ]
      })
	// 监听容器大小而改变图表大小，可以解决图表适配问题
	window.onresize = function() {
	    myChart.resize();
	 };
	// 在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例
	 myChart.dispose()