vue利用echarts绘制项目进度条,实例详解
如图所示,想要实现清晰表达当前项目的进度,可以使用百度的免费插件echarts。官网地址:https://echarts.apache.org/zh/index.html里面文档和api都很齐全,如果还是不太懂,可以去看看echarts社区的开发者开源的各种实例,非常齐全。地址:点击进入百度echarts安装我这里就不赘述,有大量的资料可以查询。下面我们就开始开发我们的项目进度条。...
·
如图所示,想要实现清晰表达当前项目的进度,还要清晰的表达当前项目进度的4种状态:当前进度,是否落后,是否超前,正确进度。可以使用百度的免费插件echarts。官网地址:https://echarts.apache.org/zh/index.html
里面文档和api都很齐全,如果还是不太懂,可以去看看echarts社区的开发者开源的各种实例,非常齐全。地址:点击进入
百度echarts安装我这里就不赘述,有大量的资料可以查询。下面我们就开始开发我们的项目进度条。
一、封装一个进度条的echarts公共组件
<!--进度条-->
<template>
<div class="c_chart" ref="progressChartRef"></div>
</template>
<script>
import echarts from "echarts";
export default {
props: {
chartData: {
default: () => {
return {};
},
},
},
data() {
return {
chart: null,
};
},
computed: {
queryChartData() {
return this.chartData || [];
},
},
mounted() {
this.initChart();
},
methods: {
initChart() {
// 根据状态值 设置颜色
let chartColor = {};
if (this.chartData.jd === "进度落后") {
chartColor = "#FF7A06"
} else if (this.chartData.jd === "进度刚好") {
chartColor = "#38C8B5"
} else if (this.chartData.jd === "进度超前") {
chartColor = "#2D6EFB"
}
// 基于准备好的dom,初始化echarts
this.chart = echarts.init(this.$refs["progressChartRef"]);
let option = {
grid: {
left: "0",
right: "0",
},
xAxis: {
show: false,
type: "value",
},
yAxis: [
{
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: [""], //数据点名称
},
],
legend: {
orient: "vertical",
x: "left",
show: false,
},
series: [
{
name: "计划完成",
type: "bar",
silent: true, //取消点击高亮
zlevel: 1,
itemStyle: {
normal: {
color: "rgba(255,122,6,0.2)",
},
},
barWidth: 16,
data: [this.chartData.fjhwc], //值
},
{
name: "实际完成",
type: "bar",
silent: true, //取消点击高亮
zlevel: 2,
itemStyle: {
normal: {
color: chartColor
},
},
barWidth: 16,
data: [this.chartData.fsjwc], //值
},
{
name: "总占比",
type: "bar",
silent: true, //取消点击高亮
barWidth: 16,
barGap: "-100%",
data: [100],
itemStyle: {
normal: {
color: "#1D2639",
},
},
},
],
};
this.chart.setOption(option);
},
},
beforeDestroy() {
if (this.chart) {
this.chart.clear();
this.chart.dispose();
}
},
};
</script>
<style lang="scss" scoped>
</style>
二、再父组件调用这个echarts子组件
这个时候是没有当前正确进度的白色竖线的,如果想要实现在当前进度这个百分百有个小竖线,如图所示。
我们可以在同级写一个div,然后,设置一个相对定位,距离左侧的距离就是他的百分比
如此,便能清晰的展示这个当前项目进度的4种状态。
更多推荐
已为社区贡献16条内容
所有评论(0)