diff --git a/src/views/modules/lingshan/home/cpts/chart/bar-dj/option.js b/src/views/modules/lingshan/home/cpts/chart/bar-dj/option.js index 578203b..640f921 100644 --- a/src/views/modules/lingshan/home/cpts/chart/bar-dj/option.js +++ b/src/views/modules/lingshan/home/cpts/chart/bar-dj/option.js @@ -112,7 +112,7 @@ export default function optionFn() { }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "#68BBC4" }, + { offset: 0, color: "#f33" }, // 68BBC4 { offset: 1, color: "rgba(255, 255, 255, 0)" }, ]), }, diff --git a/src/views/modules/lingshan/home/cpts/chart/bar-sj/option.js b/src/views/modules/lingshan/home/cpts/chart/bar-sj/option.js index 7793976..b3893dc 100644 --- a/src/views/modules/lingshan/home/cpts/chart/bar-sj/option.js +++ b/src/views/modules/lingshan/home/cpts/chart/bar-sj/option.js @@ -145,7 +145,7 @@ export default function optionFn() { }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "#68BBC4" }, + { offset: 0, color: "#f33" }, // 68BBC4 { offset: 1, color: "rgba(255, 255, 255, 0)" }, ]), }, diff --git a/src/views/modules/lingshan/home/cpts/chart/pie-ts/index.vue b/src/views/modules/lingshan/home/cpts/chart/pie-ts/index.vue index dfc2090..b8e5a01 100644 --- a/src/views/modules/lingshan/home/cpts/chart/pie-ts/index.vue +++ b/src/views/modules/lingshan/home/cpts/chart/pie-ts/index.vue @@ -60,8 +60,8 @@ export default { async orgId(val) { if (val) { // await this.getData(); - this.iniChart(); - this.setChartData(); + // this.iniChart(); + // this.setChartData(); } }, }, @@ -112,14 +112,15 @@ methods: { this.showNoData = false; this.$refs.pieChart.clear(); - this.option = optionFn(); + this.option = optionFn(this.$refs.pieChart.myChart); const { chartData: { series }, } = this; - this.option.legend.formatter = (type) => { - let item = series[0].data.find((val) => val.name == type); - return type + "：" + item.value; - }; + // this.option.legend.formatter = (type) => { + // let item = series[0].data.find((val) => val.name == type); + // console.log('========type', type, item) + // return type + "：" + item.value; + // }; this.$refs.pieChart.setOption(this.option, true); }, @@ -141,6 +142,6 @@ methods: { diff --git a/src/views/modules/lingshan/home/cpts/chart/pie-ts/option.js b/src/views/modules/lingshan/home/cpts/chart/pie-ts/option.js index 4569799..76e422c 100644 --- a/src/views/modules/lingshan/home/cpts/chart/pie-ts/option.js +++ b/src/views/modules/lingshan/home/cpts/chart/pie-ts/option.js @@ -1,6 +1,6 @@ import * as echarts from "echarts"; -export default function optionFn() { +export default function optionFn(myChart) { return { // title: { // text: "事件类型", @@ -15,49 +15,90 @@ export default function optionFn() { // tooltip: { // show: true, // }, - animationDurationUpdate: 300, - legend: { - type: "scroll", - orient: "vertical", - right: 0, - top: 20, - bottom: 20, - itemWidth: 8, - itemHeight: 8, - textStyle: { - color: "rgba(181, 217, 255, 0.75)", - }, - // data: [], + grid: { + top: "20%", + left: "3%", + right: "3%", + bottom: "10%", + containLabel: true, }, + tooltip: { + trigger: "item", + }, + animationDurationUpdate: 300, + + // legend: { + // type: "scroll", + // orient: "vertical", + // right: 0, + // top: 20, + // bottom: 20, + // itemWidth: 8, + // itemHeight: 8, + // textStyle: { + // color: "rgba(181, 217, 255, 0.75)", + // }, + // // data: [], + // }, + series: [ { - name: "特殊人群分类", + name: "", type: "pie", - radius: ["50%", "80%"], - center: ["30%", "50%"], + radius: ["35%", "55%"], + center: ["50%", "50%"], avoidLabelOverlap: false, + label: { - show: false, - position: "center", + show: true, + // position: "center", - formatter(n, s) { - console.log(n, s); - return n.data.name + "：" + n.data.value; + // formatter(n, s) { + // console.log(n, s); + // return n.data.name + "：" + n.data.value; + // }, + formatter: '{name|{b}}\n{value|{c} 人}', + + alignTo: "edge", + minMargin: 5, + edgeDistance: 10, + lineHeight: 15, + rich: { + value: { + fontSize: 10, + color: "#999", + }, }, }, + + labelLine: { + length: 15, + length2: 0, + maxSurfaceAngle: 80, + }, + + labelLayout: function (params) { + const isLeft = params.labelRect.x < myChart.getWidth() / 2; + const points = params.labelLinePoints; + // Update the end point. + points[2][0] = isLeft + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; + return { + labelLinePoints: points, + }; + }, + emphasis: { label: { - show: true, - fontSize: 14, - fontWeight: 'bold', - color:'#fff', - formatter:'{d}%' - } - }, - labelLine: { - show: false, + show: true, + fontSize: 14, + fontWeight: "bold", + color: "#fff", + formatter: "{d}%", + }, }, itemStyle: { normal: { diff --git a/src/views/modules/lingshan/home/index.scss b/src/views/modules/lingshan/home/index.scss index 38505af..9a2793c 100644 --- a/src/views/modules/lingshan/home/index.scss +++ b/src/views/modules/lingshan/home/index.scss @@ -98,3 +98,8 @@ } } } + +.m-tb { + @include scrollBar; + height: 300px; +} diff --git a/src/views/modules/lingshan/home/index.vue b/src/views/modules/lingshan/home/index.vue index 17a2375..7afe7c6 100644 --- a/src/views/modules/lingshan/home/index.vue +++ b/src/views/modules/lingshan/home/index.vue @@ -86,12 +86,50 @@
工作日志
+ +
+ + + + + + + + + + +
重点人员分析
- + @@ -113,7 +151,7 @@ import barTs from "./cpts/chart/bar-ts"; import pieTs from "./cpts/chart/pie-ts"; export default { - components: { barDj, barSj, barTs, pieTs }, + components: { barDj, barSj, barTs, pieTs }, data() { return { @@ -151,10 +189,21 @@ export default { time: "4月5日 12:33", }, ], + + rizhiData: [ + { + orgName: "小稻池村党委", + staffName: "张三", + content: "发布党建活动", + time: "2022-02-02 02:02:02", + }, + ], }; }, mounted() {}, - methods: {}, + methods: { + watchRizhi() {}, + }, };