echarts单线封装

只有一个柱，一条线封装

以下是组件的代码，

<template>
<div id="box">

</div>
</template>

<script>
import * as echarts from 'echarts';
import {drowEcharts} from '@/utils/echarts.js'
export default {
  data(){
    return{
      //x轴的值
      xAxisData:[
        "一月","二月","三月","四月","五月"
      ],
      //图要展示出的值y轴值
      seriesData:[120, 200, 150, 80, 70],
      //图类型bar,line,pie
      seriesType:"pie",
      //xAis类型类目轴category，数值轴value，时间轴time，对称轴log
      xAxisType:"value",
      //颜色
      seriesColor:"red"
    }
  },
  mounted() {
    this.drow()
  },
  methods: {
    drow(){
      var chartDom = document.getElementById('box');
      var myChart = echarts.init(chartDom);
      var option= drowEcharts(this.xAxisData,this.seriesData,this.seriesColor)
      option && myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
#box{
  width: 500px;
  height: 500px;
}
</style>

以下是utils下的代码、

export  function drowEcharts(xAxisData,seriesData,seriesColor,seriesType,xAxisType){
  var option;
  if(!seriesType){
    seriesType="bar"
  }
  if(!xAxisType){
    xAxisType="category"
  }
  option = {
    xAxis: {
      //xAis类型类目轴category，数值轴value，时间轴time，对称轴log
      type: xAxisType,
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: seriesData,
      type: seriesType,
      showBackground: true,
      color: seriesColor
    }]
  }
  return option
}

drowEcharts（）函数五个参数，前三个必须填，后两个可选，
第一个参数：
xAxisData：x轴展示的内容，上面例子展示的是月份，实际可以按需求填，请求到数据以后赋值就 可以了
第二个参数：
seriesData：x轴的值对应的值，向y轴方向上升的数值
第三个参数：
seriesColor：柱状图颜色
第四个参数（可填可不填）：
seriesType：图类型柱状图填bar,折线图填line,饼状图填pie，默认是柱状图
第五个参数（可填可不填）：
xAxisType：类目轴category，数值轴value，时间轴time，对称轴log，默认是category

标签：category,单线,封装,option,xAxisData,seriesColor,seriesType,xAxisType,echarts
来源： https://blog.csdn.net/CSDNchaxundaima/article/details/117087937