只有一个柱,一条线封装
以下是组件的代码,
<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