+
+
+
@@ -173,218 +177,125 @@ export default {
async mounted() {
await nextTick(100);
this.initCharts()
- this.initChartType()
+ // this.initChartType()
this.getBuildingwarnlist();
},
methods: {
initCharts() {
- const eId = document.getElementById('echartOrg')
+ const eId = document.getElementById('echartsBox')
let _charts = echarts.init(eId)
+
let option = {
tooltip: {
- show: false,
- trigger: 'item'
+ trigger: 'axis',
+ axisPointer: {
+ // Use axis to trigger tooltip
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ }
},
legend: {
- show: false,
- orient: 'vertical',
- top: '40%',
- left: 'right',
+ top: 'bottom',
+ bottom: 'bottom',
textStyle: {
color: '#fff'
}
},
- title: {
- text: '12000', //图形标题，配置在中间对应效果图的80%
- subtext: '总数',
- left: "center",
- top: "center",
- textStyle: {
- color: "#fff",
- fontSize: 28,
- align: "center"
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ axisLabel: {
+ color: '#fff'
+ },
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ show: false
},
- subtextStyle: {
- fontSize: 16,
+ axisLabel: {
color: '#fff'
- }
+ },
+ // axisLine: false
},
series: [
{
- // name: 'Access From',
- type: 'pie',
- // center: ['10%', '50%'],
- radius: ['40%', '60%'],
- avoidLabelOverlap: false,
- // top: top + '%',
- // height: '80%',
- left: 'center',
- width: 400,
+ name: '区域化党建单位',
+ type: 'bar',
+ stack: 'total',
+ // barWidth: 20,
label: {
- show: true,
- position: 'outer',
- alignTo: 'edge',
- formatter: '{a|{c}}\n{r|}\n{name|{b}}',
- minMargin: 5,
- edgeDistance: 20,
- lineHeight: 15,
- color: '#fff',
- fontSize: 12,
- // padding: [5],
- distanceToLabelLine: 10,
- rich: {
- name: {
- padding: [0, 6, 0, 6]
- },
- a: {
- fontSize: 15,
- color: '#fff',
- padding: [0, 6, 0, 6]
- },
- r: {
- backgroundColor: 'auto',
- borderRadius: 6,
- width: 6,
- height: 6,
- // padding: [3, 3, 0, -12]
- }
- }
+ show: true
},
emphasis: {
- label: {
- show: true,
- fontSize: '14',
- fontWeight: 'bold'
- }
+ focus: 'series'
},
- labelLine: {
- show: true,
- length: 20,
- length2: 0,
- maxSurfaceAngle: 80,
- lineStyle: {
- cap: 'round'
- }
+ data: [320, 302, 301, 334, 390, 330, 320]
+ },
+ {
+ name: '社会组织',
+ type: 'bar',
+ stack: 'total',
+ // barWidth: 20,
+ label: {
+ show: true
},
- labelLayout: function (params) {
- const isLeft = params.labelRect.x < _charts.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: {
+ focus: 'series'
},
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' }
- ]
- }
- ]
- }
- option && _charts.setOption(option);
-
- },
- initChartType() {
- const eId = document.getElementById('echartType')
- let _charts = echarts.init(eId)
- let option = {
- tooltip: {
- trigger: 'item'
- },
- legend: {
- show: false,
- orient: 'vertical',
- top: '40%',
- left: 'right',
- textStyle: {
- color: '#fff'
- }
- },
- title: {
- text: '12000', //图形标题，配置在中间对应效果图的80%
- subtext: '总数',
- left: "center",
- top: "center",
- textStyle: {
- color: "#fff",
- fontSize: 28,
- align: "center"
+ data: [120, 132, 101, 134, 90, 230, 210]
},
- subtextStyle: {
- fontSize: 16,
- color: '#fff'
- }
- },
- series: [
{
- // name: 'Access From',
- type: 'pie',
- // center: ['10%', '50%'],
- radius: ['40%', '60%'],
- avoidLabelOverlap: false,
- // top: top + '%',
- // height: '80%',
- left: 'center',
- width: 400,
+ name: '社区自组织',
+ type: 'bar',
+ stack: 'total',
+ // barWidth: 20,
label: {
- position: 'outer',
- alignTo: 'labelLine',
- formatter: '{name|{b}}\n{time|{c} 小时}',
- minMargin: 5,
- edgeDistance: 20,
- lineHeight: 15,
- color: '#fff',
- fontSize: 15,
- rich: {
- time: {
- fontSize: 10,
- color: '#fff'
- }
- }
+ show: true
},
emphasis: {
- label: {
- show: true,
- fontSize: '14',
- fontWeight: 'bold'
- }
+ focus: 'series'
},
- labelLine: {
- show: true,
- length: 20,
- length2: 0,
- maxSurfaceAngle: 80
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '志愿者',
+ type: 'bar',
+ stack: 'total',
+ // barWidth: 20,
+ label: {
+ show: true
},
- labelLayout: function (params) {
- const isLeft = params.labelRect.x < _charts.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: {
+ focus: 'series'
},
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' }
- ]
+ data: [150, 212, 201, 154, 190, 330, 410]
+ },
+ {
+ name: '未完成',
+ type: 'bar',
+ stack: 'total',
+ // barWidth: 20,
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
- }
+ };
+
option && _charts.setOption(option);
},
+
onClickList(index, level) {
this.activeIndex = index;
this.activeLevel = level;
@@ -597,4 +508,12 @@ export default {
}
}
}
+
+
+.echarts-boxs {
+ width: 100%;
+ height: 400px;
+}
+
+
+