hy-vue/src/views/statisticanalysis/costecharts/CaseCost.vue

<template>
<!--  <div>项目成本情况</div>-->
  <div style="width: 100%;height:100% ">
      <div style="height: 20%;margin-left: 4%">
        <div style="font-size: 19px;margin-bottom: 5px">项目部成本情况</div>
<!--        <div style="color: #ffffff;font-size: 19px;margin-bottom: 5px">项目部成本情况</div>-->
        <div style="display: flex;align-items: center;justify-content: flex-start">
          <div class="xian">第一项目部</div>
          <div class="xian">第二项目部</div>
          <div class="xian">第三项目部</div>
          <div class="xian">第四项目部</div>
        </div>
      </div>
    <div style="display: flex;align-items: center;justify-content: center">
      <div style="width: 33%;height: 300px">
        <div id="myOneCost" style="width: 85%; height: 70%"></div>
        <div style="width: 100%;height: 29%;padding-left: 5%">
          <div class="mu" style="">
            <div class="dui" style="text-align: center;padding-top: 10%">第一小队</div>
            <div class="dui">
              <div class="yi" style="">生产类物资</div>
              <div class="yi" style=" ">非生产类</div>
              <div style="padding-left: 3%;">
                <span>无形资产</span><br>
                <span>人员工资</span>
              </div>
            </div>
            <div class="dui">
              <div class="yi">34</div>
              <div class="yi">533</div>
              <div style="padding-left: 3%;">
                <span>234</span><br>
                <span>34</span>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div style="width: 33%;height: 300px">
        <div id="myTwoCost" style="width: 85%; height: 70%"></div>
        <div style="width: 100%;height: 29%;padding-left: 5%">
          <div class="mu" style="">
            <div class="dui" style="text-align: center;padding-top: 10%">第二小队</div>
            <div class="dui">
              <div class="yi">生产类物资</div>
              <div class="yi">非生产类</div>
              <div style="padding-left: 3%;">
                <span>无形资产</span><br>
                <span>人员工资</span>
              </div>
            </div>
            <div class="dui">
              <div class="yi">34</div>
              <div class="yi">2134</div>
              <div style="padding-left: 3%;">
                <span>234</span><br>
                <span>34</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 33%;height: 300px">
        <div id="myThreeCost" style="width: 85%; height: 70%"></div>
        <div style="width: 100%;height: 29%;padding-left: 5%">
          <div class="mu" style="">
            <div class="dui" style="text-align: center;padding-top: 10%">第三小队</div>
            <div class="dui">
              <div class="yi">生产类物资</div>
              <div class="yi">非生产类</div>
              <div style="padding-left: 3%;">
                <span>无形资产</span><br>
                <span>人员工资</span>
              </div>
            </div>
            <div class="dui">
              <div class="yi">34</div>
              <div class="yi">345345</div>
              <div style="padding-left: 3%;">
                <span>234</span><br>
                <span>34</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'CaseCost',
  data(){
    return{

    }
  },
  mounted() {
    this.echartsInitOne();
    this.echartsInitTwo();
    this.echartsInitThree();
  },
  methods:{
    echartsInitOne() {
      let myEcharts = echarts.init(document.getElementById("myOneCost"))
      let option ={
        // title: {
        //   text: '项目部成本',
        //   subtext: 'Living Expenses in Shenzhen'
        // },
        tooltip: {},
        // 图表距边框的距离,可选值：'百分比'¦ {number}(单位px)
        grid: {
          top: '10%', // 等价于 y: '16%'
          left: '6%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ["1","2","3","4","5","6","7","8","9","10","11","12"],
          // show: false,
          axisLine: {
            lineStyle: {
              color: '#000000', //x轴的颜色
              // width: 8, //轴线的宽度
            },

          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#000000', //x轴的颜色
              // width: 8, //轴线的宽度
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color:'#c2cfd9'
            }
          },
        },
        series: [
          {
            data: [10, 20, 40, 40, 50, 60,60,70,25,56,23,23], //对应每一个X坐标的值
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#7b7777', //改变折线点的颜色
                lineStyle: {
                  color: '#1ad933' //改变折线颜色
                }
              }
            },
          }
        ]
      };
      myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
    },
    echartsInitTwo() {
      let myEcharts = echarts.init(document.getElementById("myTwoCost"))
      let option ={
        // title: {
        //   text: '项目部成本',
        //   subtext: 'Living Expenses in Shenzhen'
        // },
        tooltip: {},
        // 图表距边框的距离,可选值：'百分比'¦ {number}(单位px)
        grid: {
          top: '10%', // 等价于 y: '16%'
          left: '6%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ["1","2","3","4","5","6","7","8","9","10","11","12"],
          // show: false,
          axisLine: {
            lineStyle: {
              color: '#000000', //x轴的颜色
              // width: 8, //轴线的宽度
            },

          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#000000', //x轴的颜色
              // width: 8, //轴线的宽度
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color:'#c2cfd9'
            }
          },
        },
        series: [
          {
            data: [100, 200, 400, 400, 500, 600,600,700,250,560,230,230], //对应每一个X坐标的值
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#7b7777', //改变折线点的颜色
                lineStyle: {
                  color: '#1ad933' //改变折线颜色
                }
              }
            },
          }
        ]
      };
      myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
    },
    echartsInitThree() {
      let myEcharts = echarts.init(document.getElementById("myThreeCost"))
      let option ={
        // title: {
        //   text: '项目部成本',
        //   subtext: 'Living Expenses in Shenzhen'
        // },
        tooltip: {},
        // 图表距边框的距离,可选值：'百分比'¦ {number}(单位px)
        grid: {
          top: '10%', // 等价于 y: '16%'
          left: '6%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ["1","2","3","4","5","6","7","8","9","10","11","12"],
          // show: false,
          axisLine: {
            lineStyle: {
              color: '#000000', //x轴的颜色
              // width: 8, //轴线的宽度
            },

          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#000000', //x轴的颜色
              // width: 8, //轴线的宽度
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color:'#c2cfd9'
            }
          },
        },
        series: [
          {
            data: [100, 200, 400, 400, 500, 600,600,700,250,560,230,230], //对应每一个X坐标的值
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#7b7777', //改变折线点的颜色
                lineStyle: {
                  color: '#1ad933' //改变折线颜色
                }
              }
            },
          }
        ]
      };
      myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
    }

  }
}
</script>

<style scoped>
.xian{
  color: #ffffff;
  border: 1px solid #00ff80;
  background-color: #0a8d4b;
  width: 10%;
  height: 30px;
  text-align: center;
}
.mu{
  color: #151513;
  width: 92%;
  /*border: 1px solid #ff00ff;*/
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dui{
  width: 33%;
  height: 100%;
  border: 1px solid #000000;
}
.yi{
  border-bottom:1px solid #000000;
  padding-left: 3%;
}
</style>