2.vue中echarts使用

1.先声明对象

image.png

2.给对象赋值

image.png

3.js方法

image.png
image.png

4.echarts使用

getCharts3() {
let charts3 = echarts.init(document.getElementById("ecahrts3"));

  let options = {
    title: {
      text: "重点单位统计",
      textStyle: {
        color: "#fff",
        fontWeight: "normal",
        fontSize: 16,
      },
      left: "center",
      top: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    color: [
      "#D4EC59",
      "#668ED6",
    ],
    legend: {
      orient: "vertical",
      right: "5%",
      top: "25%",
      bottom:"5%",
      type :"scroll",
      textStyle: {
        color: "#fff",
      },
      /*data:  [
        "重点",
        "非重点",]*/
      data: this.isKeyName
    },
    series: [
      {
        name: "重点单位统计",
        type: "pie",
        radius: ["35%", "48%"],
        center: ["32%", "55%"],
        label: {
          show: false,
          position: "center",
        },
        /*data: [
          { value: 310, name: "重点单位" },
          { value: 300, name: "非重点单位" },
        ],*/
        data:this.isKeyCount
      },
    ],
  };

  charts3.setOption(options);
},

---

• 具体代码
  ---vue
  <template>
  <div class="left">
  <div class="top">
  <hj-tab
  style="width: calc(100% - 2vw); margin: 0 auto"
  :tabList="tabList"
  :value.sync="active"
  @change="change"
  />
  <div id="ecahrts1" v-show="active == 1"></div>
  <div id="ecahrts3" v-show="active == 2"></div>
  </div>
  <div class="bottom">
  <div id="ecahrts2"></div>
  </div>
  </div>
  </template>
  <script>
  import echarts from "echarts";
  import {
  getCompanyCountByIsKey,
  getCompanyCountByVillage,
  getCompanyCountByPlace,
  } from "@/api/company/company"

export default {
// 挂载vue实列对象后使用
mounted() {
this.getInfo();
/九小场所/
this.getCharts1();
/不同小区/
this.getCharts2();
/重点单位/
// this.getCharts3();
},

data() {
return {
/重点非重点之和/
isKeySum: 0,
isKeyCount:[{
name: "",
value: 0
}],
isKeyName: [{_name:""}],
active: 1,
tabList: [
{ name: "九小场所分类统计", value: 1 },
{ name: "重点单位统计", value: 2 },
],
};
},
methods: {

getInfo() {
  // 重点单位
  getCompanyCountByIsKey().then(res=>{
    this.isKeySum = 0;
    // 2. 获取名字对应的总数
    let arr = res.data.map(item => {
      var _obj = {};
      _obj.name = item.name;
      _obj.value = item.count;
      return _obj;
    })
    this.isKeyCount = arr
    // 1.计算总和
    let sum = res.data.reduce((prev, cur) => {
      return prev.count + cur.count;
    })
    this.isKeySum = sum;

    // 3.获取侧标篮
    let nameArr = this.isKeyCount.map(item => {
      return item.name;
    })
    this.isKeyName = nameArr;
  }).catch(e => {
    this.isKeyCount = [{name:'', count:''}];
    this.getCharts3();
  });
  // // 九小
  // getCompanyCountByPlace().then(res=>{
  //
  // });
  // // 企业
  // getCompanyCountByVillage().then(res=>{
  //
  // });
},




change(value){
  if(value == 1){
    this.$nextTick(() =>{
      this.getCharts1();
    })
  }else{
    this.$nextTick(() =>{
      this.getCharts3();
    })
  }
},
getCharts1() {
  let charts1 = echarts.init(document.getElementById("ecahrts1"));

  let options = {
    title: {
      text: "九小场所分类统计",
      textStyle: {
        color: "#fff",
        fontWeight: "normal",
        fontSize: 16,
      },
      left: "center",
      top: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    color: [
      "#D4EC59",
      "#9CDC82",
      "#32D3EB",
      "#23C2DB",
      "#3294FB",
      "#668ED6",
      "#4A79CD",
      "#7CBAFF",
      "#7079DF",
      "#9D96F5",
    ],
    legend: {
      orient: "vertical",
      right: "5%",
      top: "25%",
      bottom:"5%",
      type :"scroll",
      textStyle: {
        color: "#fff",
      },
      data: [
        "非九小",
        "小学校及幼儿园",
        "小生产加工企业",
        "小歌舞娱乐场所",
        "小美容洗浴场所",
        "小餐饮场所",
        "小医院",
        "小商店",
        "小网吧",
        "小旅馆",
      ],
    },
    series: [
      {
        name: "九小场所分类统计",
        type: "pie",
        selectedMode: "single",
        radius: [0, "25%"],
        center: ["32%", "55%"],
        label: {
          position: "inner",
        },
        labelLine: {
          show: false,
        },
        color:["#FFE168","#60ACFC"],
        data: [
          { value: 300, name: "非九小" },
          { value: 2700, name: "九小场所"},
        ],
      },
      {
        name: "九小场所分类统计",
        type: "pie",
        radius: ["35%", "48%"],
        center: ["32%", "55%"],
        label: {
          show: false,
          position: "center",
        },
        data: [
          { value: 300, name: "非九小" },
          { value: 300, name: "小学校及幼儿园" },
          { value: 300, name: "小生产加工企业" },
          { value: 300, name: "小歌舞娱乐场所" },
          { value: 300, name: "小美容洗浴场所" },
          { value: 300, name: "小餐饮场所" },
          { value: 300, name: "小医院" },
          { value: 300, name: "小商店" },
          { value: 300, name: "小网吧" },
          { value: 300, name: "小旅馆" },
        ],
      },
    ],
  };

  charts1.setOption(options);
},
getCharts3() {
  let charts3 = echarts.init(document.getElementById("ecahrts3"));

  let options = {
    title: {
      text: "重点单位统计",
      textStyle: {
        color: "#fff",
        fontWeight: "normal",
        fontSize: 16,
      },
      left: "center",
      top: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    color: [
      "#D4EC59",
      "#668ED6",
    ],
    legend: {
      orient: "vertical",
      right: "5%",
      top: "25%",
      bottom:"5%",
      type :"scroll",
      textStyle: {
        color: "#fff",
      },
      data: this.isKeyCount
    },
    series: [
      {
        name: "重点单位统计",
        type: "pie",
        radius: ["35%", "48%"],
        center: ["32%", "55%"],
        label: {
          show: false,
          position: "center",
        },
        /*data: [
          { value: 310, name: "重点单位" },
          { value: 300, name: "非重点单位" },
        ],*/
        data:this.isKeyCount
      },
    ],
  };

  charts3.setOption(options);
},
getCharts2() {
  let charts2 = echarts.init(document.getElementById("ecahrts2"));

  let options = {
    title: {
      text: "小区相关企业TOP5",
      textStyle: {
        color: "#fff",
        fontWeight: "normal",
        fontSize: 16,
      },
      left: "center",
      top: "10%",
    },
    color: ["#3398DB"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top:"25%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["满庭春", "世纪朝阳", "红谷君庭", "利仁苑", "青瓷野墅"],
        axisTick: {
          show: false,
        },
        axisLabel:{
          color :"#7ECEF4"
        },
        axisLine:{
          lineStyle:{
            color:"#1B2A50"
          }
        }
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLabel:{
          color :"#7ECEF4"
        },
        axisLine:{
          lineStyle:{
            color:"#1B2A50"
          }
        },
        splitLine:{
          lineStyle:{
            color:"#1B2A50"
          }
        }
      },
    ],
    series: [
      {
        name: "小区相关企业TOP5",
        type: "bar",
        barWidth: "20%",
        label:{
          show:true,
          position:"top",
          color:"#fff"
        },
        itemStyle:{
          barBorderRadius:8,
          color:{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#20B0DF' // 0% 处的颜色
              }, {
                  offset: 1, color: '#0C5CB0' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
          }
        },
        data: [334, 220, 200, 152, 89],
      },
    ],
  };

  charts2.setOption(options);
},

},

};
</script>

<style lang="scss" scoped>
.left {
height: 88vh;
width: 22vw;
margin-left: 2vw;
float: left;
.title {
margin: 0;
color: #fff;
text-align: center;
font-size: 1.4vh;
line-height: 2.8vh;
}
.top {
background-image: url(/images/archives/company/left.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: calc(50% - 3vh);
margin-bottom: 2vh;
padding-top: 2vh;
#ecahrts1 {
height: 38vh;
}
#ecahrts3 {
height: 38vh;
}
}
.bottom {
background-image: url(/images/archives/company/left.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: calc(50% - 1vh);
#ecahrts2 {
height: 100%;
}
}
}
</style>

---