其他分享
首页 > 其他分享> > echarts单线封装

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