使用于柱状,环形
<template>
<div>
<!-- echarts -->
<div ref="box" id="box"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: ["option"],
methods: {
renderCharts() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.box);
// 指定图表的配置项和数据
var option = {
grid: {
left: "3%",
right: "6%",
bottom: "5%",
containLabel: true,
},
xAxis: {
name:this.option.name,
type: "category",
boundaryGap : true,//柱子间距
data: this.option.xData, // x轴数据
show: this.option.type == "bar" ? true : false,
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
axisTick:{
show:false
},
axisLabel: {
show: true,
textStyle: {
color:"rgba(255,255,255,0.5)",
},
margin:10
},
nameTextStyle:{
color:"rgba(255,255,255,0.5)",
align:'lift',
padding:[15,10,10,0],
fontSize:15
}
},
yAxis: {
name:'数量',
type: "value",
show: this.option.type == "bar" ? true : false,
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,0.1)",
},
},
axisLabel: {
margin:15,
show: true,
textStyle: {
color:"rgba(255,255,255,0.5)",
}
},
nameTextStyle:{
color:"rgba(255,255,255,0.5)",
align:'right',
padding:[15,10,0,0],
fontSize:14
}
},
series: [
{
type: this.option.type, // y轴数据要显示柱状图或者折线图 改参数
data: this.option.amountData, // y轴的核心数据
radius: ["60%", "70%"], //半径
label: { show: false },
barWidth: 20, //柱图宽度
itemStyle: {
normal: {
color: this.option.color?new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.option.color.top,
},
{
offset: 1,
color: this.option.color.bottom,
},
]):'',
barBorderRadius: this.option.barBorderRadius
? this.option.barBorderRadius
: [0, 0, 0, 0],
},
},
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 0.4,
y2: 1,
colorStops: [{
offset: 0,
color: '#ae34ff' // 0% 处的颜色
}, {
offset: 1,
color: '#4844fa' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},{
type: 'linear',
x: 0,
y: 0,
x2: 0.4,
y2: 1,
colorStops: [{
offset: 0,
color: '#14e3ea' // 0% 处的颜色
}, {
offset: 1,
color: '#09de8c' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
mounted() {
// 渲染视图
this.renderCharts();
// setTimeout(()=>{
// },2000)
},
};
</script>
<style lang="less" scoped>
#box {
width: 94%;
height: 345px;
padding: 15px 25px 30px 30px;
box-sizing: border-box;
background: transparent;
border-radius: 7px;
// box-shadow: 1px 1px 10px 1px #ccc;
}
</style>