2021-06-14

<template>
  <div>
    <h1>第一种在vue中使用echart的方式</h1>
    <div class="charts">
      <div id="barGraph" style="height: 350px"></div>
    </div>
    <div class="charts">
      <div id="pieGraph" style="height: 450px"></div>
    </div>
    <div class="chartsTwo">
      <div id="pieGraphTwo" style="height: 450px"></div>
    </div>
  </div>
</template>
<script>
// 引入基本模板,按需加载
const echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入柱状图
require('echarts/lib/chart/pie')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'WelcomePage',
  data() {
    return {}
  },
  mounted() {
    this.drawBar()
    this.drawPie()
    this.drawPieer()
  },
  methods: {
    drawBar() {
      // 基于dom，初始化echarts实例
      const barGraph = echarts.init(document.getElementById('barGraph'))
      // 绘制图表
      barGraph.setOption({
        title: {
          text: '资源总览',
          left: '20px',
          textStyle: {
            color: '#436EEE',
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          itemWidth: 15,
          itemHeight: 15,
          data: ['一般问题', '严重问题'],
        },
        xAxis: {
          data: ['德州', '菏泽', '淄博', '泰安', '烟台', '建设公司', '临沂', '滨州', '东莞', '枣庄', '济南', '威海', '济宁', '青岛', '潍坊', '聊城', '日照', '莱芜'],
          splitLine: {
            show: false,
          },
          // 去掉x轴刻度线
          axisTick: {
            show: false,
          },
          axisLable: {
            show: false,
            textStyle: {
              fontSize: 22,
              fontWeight: 700,
            },
          },
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: '#6683a5',
              fontFamily: '微软雅黑',
            },
          },
          //横轴的字变为倾斜
          axisLabel: {
            interval: 0,
            rotate: 40,
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            //这是y轴文字颜色
            lineStyle: {
              color: '#6683a5',
              fontSize: 40,
            },
          },
          axisLabel: {
            textStyle: {
              show: true,
              fontFamily: '微软雅黑',
              color: '#6683a5',
              fontSize: '15',
            },
          },
        },
        series: [
          //   {
          //     name: '一般问题',
          //     type: 'bar',
          //     stack: '使用情况',
          //     data: [24, 25, 21, 21, 17, 18, 18, 10, 11, 12, 15, 10, 13, 9, 5],
          //     itemStyle: {
          //       normal: { color: '#FF8849' },
          //     },
          //   },
          //   {
          //     name: '严重问题',
          //     type: 'bar',
          //     stack: '使用情况',
          //     data: [4, 3, 6, 2, 6, 4, 4, 9, 8, 6, 2, 4, 0, 2, 4],
          //     itemStyle: {
          //       normal: { color: '#3FBB49' },
          //     },
          //   },
          // ],
          {
            name: '一般问题',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                fontSiz: '15',
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#308399',
                  },
                  {
                    offset: 0.5,
                    color: '#3a9eb9',
                  },
                  {
                    offset: 1,
                    color: '#308399',
                  },
                ]),
                label: {
                  show: true,
                  position: 'insideRight',
                  //修改柱子内部的颜色放label里面
                  fontWeight: 700,
                  color: '#000000',
                  // 柱形图中文字的颜色居中
                  position: 'inside',
                },
              },
            },
            data: [24, 25, 21, 21, 17, 18, 18, 10, 11, 12, 15, 10, 13, 9, 5, 0, 0, 0],
            // 设置柱状图大小
            barWidth: 25,
          },
          {
            name: '严重问题',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#a32f2c',
                  },
                  {
                    offset: 0.4,
                    color: '#c73c39',
                  },
                  {
                    offset: 1,
                    color: '#a32f2c',
                  },
                ]),
                label: {
                  show: true,
                  position: 'insideRight',
                  //修改柱子内部的颜色放label里面
                  color: '#000000',
                  fontWeight: 700,
                  // 柱形图中文字的颜色居中
                  position: 'inside',
                },
              },
            },
            data: [4, 3, 6, 2, 6, 4, 4, 9, 8, 6, 2, 4, 0, 2, 4],
            // 设置柱状图大小
            barWidth: 25,
            // 柱形的颜色是这里
            // itemStyle: {
            //   normal: {
            //     color: '#b83633',
            //   },
            // },
          },

          // {
          //   name: '熄火',
          //   type: 'bar',
          //   stack: '总量',
          //   itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
          //   data: [220, 182, 191, 234],
          // },
          // {
          //   name: '离线',
          //   type: 'bar',
          //   stack: '总量',
          //   itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
          //   data: [150, 212, 201, 154],
          // },
        ],
      })
    },
    drawPie() {
      const pieGraph = echarts.init(document.getElementById('pieGraph'))
      pieGraph.setOption({
        title: {
          // text: '某站点用户访问来源',
          // subtext: '纯属虚构',
          // x: 'center',
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [
            '人员管理及到位\n8%',
            '施工方案及交底\n20%',
            '作业票管理\n3%',
            '风险计划\n6%',
            '分包管理\n1%',
            '施工机只维护及使用\n10%',
            '',
            '安全工具只使用\n7%',
            '安全文明施工\n12%',
            '现场安全隐患\n24%',
            '基建e安全\n4%',
            '安全培训\n4%',
            '其他数量\n1%',
          ],
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            // 圆的大小
            radius: '80%',
            center: ['50%', '60%'],
            label: {
              textStyle: {
                fontSize: 12,
                fontWeight: 'bolder',
              },
            },
            data: [
              { value: 8, name: '人员管理及到位\n8%' },
              { value: 20, name: '施工方案及交底\n20%' },
              { value: 3, name: '作业票管理\n3%' },
              { value: 6, name: '风险计划\n6%' },
              { value: 1, name: '分包管理\n1%' },
              { value: 10, name: '施工机只维护及使用\n10%' },
              { value: '', name: '' },
              { value: 7, name: '安全工具只使用\n7%' },
              { value: 12, name: '安全文明施工\n12%' },
              { value: 24, name: '现场安全隐患\n24%' },
              { value: 4, name: '安全培训\n4%' },
              { value: 4, name: '基建e安全\n4%' },
              { value: 1, name: '其他数量\n1%' },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            fontSize: '18px',
            fontFamily: '微软雅黑',
            color: ['#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', '#f79646', '#2c4d75', '#772c2a', '#5f7530', '#4d3b62', '#276a7c', '#b65708'],
          },
        ],
      })
    },
    drawPieer() {
      const pieGraphTwo = echarts.init(document.getElementById('pieGraphTwo'))
      pieGraphTwo.setOption({
        title: {
          // text: '某站点用户访问来源',
          // subtext: '纯属虚构',
          // x: 'center',
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [
            '合同管理及质量终身责任制落实\n2%',
            '策划方案,技术方案\n10%',
            '原材料检验及报审\n16%',
            '地基基础及沉降\n2%',
            '土建工艺质量\n38%',
            '钢结构施工\n9%',
            '建筑电气及装饰装修\n3%',
            '设备安装\n2%',
            '电气工艺\n9%',
            '组塔,架线及附件安装\n3%',
            '质量逐级验收\n2%',
            '其他问题\n2%',
            '人员资格\n2%',
          ],
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            // 圆的大小
            radius: '80%',
            center: ['50%', '60%'],
            label: {
              textStyle: {
                fontSize: 12,
                fontWeight: 'bolder',
              },
            },
            data: [
              { value: 2, name: '合同管理及质量终身责任制落实\n2%' },
              { value: 10, name: '策划方案,技术方案\n10%' },
              { value: 16, name: '原材料检验及报审\n16%' },
              { value: 2, name: '地基基础及沉降\n2%' },
              { value: 38, name: '土建工艺质量\n38%' },
              { value: 9, name: '钢结构施工\n9%' },
              { value: 3, name: '建筑电气及装饰装修\n3%' },
              { value: 2, name: '设备安装\n2%' },
              { value: 9, name: '电气工艺\n9%' },
              { value: 3, name: '组塔,架线及附件安装\n3%' },
              { value: 2, name: '质量逐级验收\n2%' },
              { value: 2, name: '其他问题\n2%' },
              { value: 2, name: '人员资格\n2%' },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            fontSize: '18px',
            fontFamily: '微软雅黑',
            color: ['#cc3c39', '#94ba44', '#73529b', '#2d98b5', '#f48727', '#1d4575', '#791f1c', '#5d7a23', '#45305f', '#196e85', '#cb5100', '#6194d2', '#3b7bc8'],
          },
        ],
      })
    },
  },
}
</script>