123 lines
2.7 KiB
Vue
123 lines
2.7 KiB
Vue
<template>
|
|
<div class="project-e-echarts-pie">
|
|
<div :id="eId" :style="styles"></div>
|
|
<!-- <div v-else>暂无数据</div> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
export default {
|
|
name: "echartsRadarWrap",
|
|
props: {
|
|
eId: {
|
|
type: String,
|
|
},
|
|
styles: {
|
|
type: String,
|
|
},
|
|
colorList: {
|
|
type: [Array, String],
|
|
default: "",
|
|
},
|
|
option: {
|
|
stype: Object,
|
|
default: [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
};
|
|
},
|
|
created() {
|
|
this.chart = null;
|
|
},
|
|
mounted() {
|
|
this.drawLine();
|
|
},
|
|
methods: {
|
|
updateEchart() {
|
|
if (this.chart) {
|
|
this.chart = null;
|
|
}
|
|
this.drawLine();
|
|
},
|
|
drawLine() {
|
|
if (!this.chart) {
|
|
this.chart = echarts.init(document.getElementById(this.eId));
|
|
}
|
|
const option = {
|
|
color: this.colorList,
|
|
// legend: {
|
|
// top: "5",
|
|
// right: "10",
|
|
// type: "scroll",
|
|
// // itemWidth: 10, // legend 显示宽度
|
|
// orient: "vertical",
|
|
// pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
|
|
// pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
|
|
// pageIconSize: 10, //翻页按钮大小
|
|
// pageButtonItemGap: 1, //翻页按钮的两个之间的间距
|
|
// textStyle: {
|
|
// color: "#fff",
|
|
// fontSize: 16,
|
|
// },
|
|
// formatter: function (name) {
|
|
// return name.length > 7 ? name.substr(0, 7) + "..." : name;
|
|
// },
|
|
// },
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
center: ["50%", "50%"],
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: "#fff",
|
|
borderWidth: 2,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
borderRadius: 1,
|
|
},
|
|
data: this.option,
|
|
},
|
|
],
|
|
};
|
|
this.chart.setOption(option);
|
|
},
|
|
},
|
|
watch: {
|
|
option(val, oldVal) {
|
|
this.chart = null;
|
|
this.drawLine();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.project-e-echarts-pie {
|
|
position: relative;
|
|
height: 100%;
|
|
top: 0px;
|
|
width: 50%;
|
|
}
|
|
</style>
|