123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- <template>
- <div>
- <div>
- <h2>监测任务统计</h2>
- <div id="monitor" style="width:100%;height:400px;">
- </div>
- </div>
-
-
- </div>
-
- </template>
- <script>
- export default {
- data(){
- return {
- monitorData:'',
- task_class:'例行监测'
- }
- },
- created(){
- },
- mounted() {
- this.stasticalTasks();
- },
- methods:{
- async stasticalTasks(){
- const result = await this.$http.post("stasticalTasks",{task_class});
- this.monitorData = this.result.data.data
- },
- stasticalTasks () {
- //第一步:实例化对象
- const monitorChart = this.$echarts.init(document.getElementById('monitor'))
- //第二步:指定配置项和数据
- const monitorData = {
- //工具提示
- tooltip: {
- trigger: 'axis',//触发:轴
- axisPointer: { // 坐标轴指示器,坐标轴触发有效(鼠标悬停时候的样式)
- type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- //网格样式
- grid: {
- left: '15%',//左边距
- right: '15%',//右边距
- bottom: '3%',//底边距
- containLabel: true//是否包含标签
- },
- //x轴
- xAxis: [
- {
- type: 'category',
- data: ['已完成', '未完成', '未发布', '已发布', '已废止'],
- axisTick: {
- alignWithLabel: true //轴刻度 --与标签对齐
- },
- axisLabel:{
- fontSize:15
- },
- //不显示x坐标轴线
- axisLine:{
- show: false,
- }
- }
- ],
- //y轴
- yAxis: [
- {
- type: 'value',
- }
- ],
- //
- series: [
- {
- type: 'bar', // type值设置图表类型,bar为柱状图
- barWidth: '30%', // 柱形的宽度
- data: [10, 52, 200, 334, 390 ],
- showBackground: true,//是否显示背景色
- backgroundStyle: {
- color: 'rgba(180, 180, 180, 0.2)'
- }
- }
- ]
- }
- //第三步:把配置项给实例对象
- monitorChart.setOption(monitorData)
- }
- }
-
- }
- </script>
- <style>
- h2{
- /* margin: 0 auto; */
- display: flex;
- justify-content: center;;
- }
- </style>
|