代码
<template>
<div id="project-overview">
<div class="Chart_one" id="myChartCurveb">
</div>
</div>
</template>
<script>
export default {
mounted() {
this.drawLine()
},
methods: {
drawLine() {
let myChart = this.$echarts.init(document.getElementById('myChartCurveb'))
let options = {
legend: {
// 图例的位置
bottom: '0px',
textStyle: {
fontSize: '12',
color: '#fff'
}
},
tooltip: {
axisPointer: {
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '1%',
right: '1%',
top: '5%',
bottom: '15%',
containLabel: true
},
xAxis: { //设置x轴
type: 'category',
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
splitLine: {show: false},//去除网格线
axisLabel: {
show: true, // 是否显示
interval: 0,
textStyle: {
fontSize: '12',
color: '#fff'
}
},
axisTick:{ //x轴刻度线
show:false,
},
axisLine: { // 坐标轴 轴线
show: false, // 是否显示
},
},
yAxis: {
show: false, // 是否显示
splitLine: {
show: false
},//去除网格线
// 轴线颜色及轴线文字颜色,但有单独设置文字颜色的,可以覆盖这个颜色
axisLine: {
show: false, // 是否显示
// ------ 线 ---------
lineStyle: {
type: 'solid'
}
},
// 轴字体样式
axisLabel: {
interval: 0,
textStyle: {
fontSize: '12',
color: '#fff'
}
},
},
series: [{
name: "女生",
type: "bar",
barGap: '0%',
barWidth: '25%',
data: [5, 20, 40, 10, 10, 20, 49],
itemStyle: {
// 给每个柱子设置渐变颜色
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#17AAF7'},
{offset: 1, color: 'rgba(23, 170, 247, 0.3)'}
]
),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: '10',
color: '#fff'
}
}
}
}
},
{
name: "男生",
type: "bar",
barGap: '0%',
barWidth: '25%',
data: [190, 29, 46, 12, 90, 70, 23],
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#999999'},
{offset: 1, color: 'rgba(153, 153, 153, 0.3)'}
]
),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: '10',
color: '#fff'
}
}
}
}
}],
}
myChart.setOption(options)
},
}
}
</script>
<style lang="less" scoped>
#project-overview {
width: 100%;
height: 100%;
.Chart_one {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.Chart_one-title{
display:inline-block;
width: 100%;
height: 10px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
line-height: 10px;
}
}
</style>
初来乍到,有啥规矩,评论区记得 叮!! 一下哦。