<template>
<div class="wisdom-box">
<div class="title-box">
<span>智慧助餐</span>
</div>
<!-- 条形图 -->
<div class="bar" ref="barechart"></div>
</div>
</template>
<script>
import * as echarts from "echarts"
export default {
data() {
return {
}
},
mounted() {
const bardom = this.$refs.barechart
const barEchart = echarts.init(bardom)
const options = {
timeline:{
show:false,
top:0,
data:[]
},
legend:{
top:"1%",
itemWidth:10,
itemHeight:10,
icon:"horizontal",
textStyle:{
color:"#fff",
},
data:["销售额","会员"],
z:100
},
grid: [
{
show:true,
left: "2%",
top: "10%",
bottom: "5%",
width: "40%",
containLabel: true,
},
{
show:true,
top: "20%",
bottom: "5%",
left: "60%",
// width: "20%",
},
{
show:true,
top: "10%",
right: "2%",
bottom: "5%",
width: "36%",
containLabel: true,
}
],
xAxis: [
{
type: "value",
inverse: true,//反向
position: "bottom",
axisLabel: {
show: true,
color:"#4FA6F7"
},
axisLine: {
show: true
},
axisTick: {
show: true
},
splitLine: {
show: true
}
},
{
gridIndex: 1,
show: true
},
{
type: "value",
gridIndex: 2,
position: "bottom",
axisLabel: {
show: true,
color:"#4FA6F7"
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: "category",
position: "right",
inverse: true,
axisLabel: {
show: false,
color: "#fff"
},
axisLine: {
show: false
},
axisTick: {
show: false
},
data: ["南浔古镇食堂", "南浔城南", "七都日照中心", "桃源日照中心","万宁社区助餐点","观澜名苑社区"]
},
{
type: "category",
gridIndex: 1,
inverse: true,
position: "center",
offset:32,//偏移
axisLabel: {
align: "center",
color: "#fff"
},
axisLine: {
show: true
},
axisTick: {
show: true
},
splitLine: {
show: true
},
data: ["南浔古镇食堂", "南浔城南", "七都日照中心", "桃源日照中心","万宁社区助餐点","观澜名苑社区"]
},
{
type: "category",
gridIndex: 2,
inverse: true,
position: "left",
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
data: ["南浔古镇食堂", "南浔城南", "七都日照中心", "桃源日照中心","万宁社区助餐点","观澜名苑社区"]
}
],
series: [
{
type: "bar",
barWidth: 15,
label: {
show: false,
},
itemStyle: {
borderRadius: [10, 0, 0, 10],
color:new echarts.graphic.LinearGradient(1,0,0,0,[
{
offset:0,
color:"rgba(23,38,91,0.1)"
},
{
offset:1,
color:"rgba(28,219,254)"
}
])
},
data:[100,200,300,400,500,600]
},
{
type: "bar",
barWidth: 15,
xAxisIndex: 2,
yAxisIndex: 2,
label: {
position: "right"
},
itemStyle: {
borderRadius: [0, 10, 10, 0],
color:new echarts.graphic.LinearGradient(0,0,1,0,[
{
offset:0,
color:"rgba(23,38,91,0.1)"
},
{
offset:1,
color:"rgba(251,154,68)"
}
])
},
data:[100,200,300,400,500,600]
}
]
}
// const options = {
// grid: {
// left: '2%',
// right: '2%',
// bottom: '2%',
// top: '2%',
// containLabel: true
// },
// xAxis: {
// show: false,
// type: 'value'
// },
// yAxis: [
// {
// type: 'category',
// inverse: true,
// axisLabel: {
// show: true,
// textStyle: {
// color: '#fff'
// },
// },
// splitLine: {
// show: false
// },
// axisTick: {
// show: false
// },
// axisLine: {
// show: false
// },
// data: ["安徽省","河南省","浙江省","湖北省","贵州省","江西省","江苏省","四川省","云南省","湖南省"]
// },
// {
// type: 'category',
// inverse: true,
// axisTick: 'none',
// axisLine: 'none',
// show: true,
// axisLabel: {
// textStyle: {
// color: '#ffffff',
// fontSize: '12'
// },
// },
// data:[239,181,154,144,135,117,74,72,67,55]
// }
// ],
// series: [
// {
// name: '值',
// type: 'bar',
// zlevel: 1,
// itemStyle: {
// normal: {
// barBorderRadius: 30,
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
// offset: 0,
// color: 'rgb(57,89,255,1)'
// }, {
// offset: 1,
// color: 'rgb(46,200,207,1)'
// }]),
// },
// },
// barWidth: 20,
// data: [239,181,154,144,135,117,74,72,67,55]
// },
// {
// name: '背景',
// type: 'bar',
// barWidth: 20,
// barGap: '-100%',
// itemStyle: {
// normal: {
// color: 'rgba(24,31,68,1)',
// barBorderRadius: 30,
// }
// },
// },
// ]
// }
barEchart.setOption(options)
}
}
</script>
<style lang="scss" scoped>
.wisdom-box {
box-sizing: border-box;
height: 100%;
}
.title-box {
margin-top: 22px;
margin-left: 41px;
& span {
font-size: 22px;
color: #1CDBFE;
font-family: SourceHanSansCN-Light;
}
;
& span::before {
content: "";
display: block;
position: absolute;
width: 13px;
height: 27px;
background-color: #1CDBFE;
border-radius: 6px;
top: 3px;
left: 17px;
}
}
.bar {
height: 210px;
border: 1px solid red;
}
</style>
echarts双向柱状图
最新推荐文章于 2024-07-31 14:40:54 发布