<template>
<div class="container">
<div id="echart" class="container"></div>
</div>
</template>
<script>
export default {
data() {
return {
timmerOneAnim: null,
myChart: null,
};
},
created() { },
mounted() {
this.$nextTick(() => {
this.Init();
});
},
methods: {
Init() {
const echarts = require("echart");
if (
//判断是否存在echarts实例化对象,如果存在则销毁
this.myChart != null &&
this.myChart != "" &&
this.myChart != undefined
) {
this.myChart.dispose();
}
var myChartDom = document.getElementById("lowerEcharts");
this.myChart = this.$echarts.init(myChartDom);
this.myChart.clear(); //清空画布数据
var option = {
// backgroundColor: "#031d33",
grid: {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
xAxis: {
show: false,
type: "value",
boundaryGap: [0, 0],
},
yAxis: [
{
type: "category",
data: [""],
axisLine: { show: false },
axisTick: [
{
show: false,
},
],
},
],
series: [
{
name: "金额",
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
// color: "#00eeff",
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
{
offset: 1,
// color: "rgba(255,51,51, 1)",
color: "#56ab2f",
},
{
offset: 0,
// color: "rgba(255,51,51, 0.4)",
color: "#a8e063",
},
]),
},
},
barWidth: 10,
data: [60],
},
{
name: "背景",
type: "bar",
barWidth: 10,
barGap: "-100%",
data: [100],
itemStyle: {
normal: {
color: "rgba(229,230,231, 0.4)",
barBorderRadius: 30,
},
},
},
],
};
option && this.myChart.setOption(option, true);
// 设置宽度自适应
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
},
beforeDestroy() { },
};
</script>
<style lang="scss" scoped>
.container {
height: 100%;
width: 100%;
}
</style>
效果图
