echarts

echarts饼图legend百分比计算时四舍五入有误差的解决方案

   // 传入参数（数组数据，数组下标，精度），底下有例子调用
    var getPercentValue = function (valueList, idx, precision) {
        // 判断是否为空
        if (!valueList[idx]) {
            return 0;
        }
        // 求和
        var sum = valueList.reduce(function (acc, val) {
            return acc + (isNaN(val) ? 0 : val);
        }, 0)
        if (sum === 0) {
            return 0;
        }
        // 10的2次幂是100，用于计算精度。
        var digits = Math.pow(10, precision);
        // 扩大比例100，
        var votesPerQuota = valueList.map(function (val) {
            return (isNaN(val) ? 0 : val) / sum * digits * 100;
        })
        // 总数，扩大比例意味的总数要扩大
        var targetSeats = digits * 100;
        // 再向下取值，组成数组
        var seats = votesPerQuota.map(function (votes) {
            return Math.floor(votes);
        })
        // 再新计算合计，用于判断与总数量是否相同，相同则占比会100%
        var currentSum = seats.reduce(function (acc, val) {
            return acc + val;
        }, 0)
        // 余数部分的数组：原先数组减去向下取值的数组，得到余数部分的数组
        var remainder = votesPerQuota.map(function (votes, idx) {
            return votes - seats[idx];
        })
        // 给最大最大的余额加1，凑个占比100%；
        while (currentSum < targetSeats) {
            //  找到下一个最大的余额，给其加1
            var max = Number.NEGATIVE_INFINITY;
            var maxId = null;
            for (var i = 0, len = remainder.length; i < len; ++i) {
                if (remainder[i] > max) {
                    max = remainder[i];
                    maxId = i;
                }
            }
            // 对最大项余额加1
            ++seats[maxId];
            // 已经增加最大余数加1，则下次判断就可以不需要再判断这个余额数。
            remainder[maxId] = 0;
            // 总的也要加1，为了判断是否总数是否相同，跳出循环。
            ++currentSum;
        }
        // 这时候的seats就会总数占比会100%
        return seats[idx] / digits
    }

  //调用
  getPercentValue(arr,0,2)

echarts迁徙地图

<template>
  <div id="moveMapChart" style=" 100%; height: 500px"></div>
</template>

<script>
import resize from "@/util/resize"
import * as echarts from "echarts"
import "./china.js"
export default {
  name:"moveMapChart",
  mixins:[resize],
  data() {
    return {
      data:[],
      charts:null,
      timeFn:null,
      geoCoordMap:{},
      cityName:""
    };
  },
  props:{
    comJson:{
      type:Object,
      default:function(){
        return {linaData:[],cityList:[],geoCoord:{},config:{}}
      }
    }
  },
  watch:{
    comJson:{
      handler:function(){
        this.whatfuck()
      },
      deep:true
    }
  },
  computed: {},
  created(){
    this.getStore();
  },
  mounted(){
    this.whatfuck()
  },
  methods: {
    let that = this
    if(that.charts){
      that.charts.dispose()
    }
    that.charts=that.$echarts.init(document.getElementById("moveMapChart"))
    let cityList = that.comJson.cityList.length === 0?[that.cityName]:this.comJson.cityList
    let text = that.comJson.config.text||""
    that.geoCoordMap = that.comJson.geoCoord
    let convertData = function(data){
      let res = []
      for (let i = 0; i < data.length; i++) {
        let dataItem = data[i]
        let fromCoord = that.geoCoordMap[dataItem[0].name]
        let toCoord = that.geoCoordMap[dataItem[1].name]
        if(fromCoord && toCoord){
          res.push({
            coords:[fromCoord,toCoord],
            info:[dataItem[0].name,dataItem[1].name,dataItem[0].value]
          })
        }
      }
      return res
    }
    let series = [
      {
        type:"effectScatter",
        name:"qianXi",
        rippleEffect:{
          brushType:"fill"
        },
        coordinateSystem:"geo",
        symbolSize:10,
        label:{
          show:true,
          position:"right",
          formatter:"{b}"
        },
        itemStyle:{
          color:"#00ffff"
        },
        data:cityList.map(function(item){
          return {name:item,value:that.geoCoordMap[item]}
        }),
        zlevel:2
      }
    ]
    [["qianXi",that.conJson.lineData]].forEach(function(item,i){
      series.push(
        {
          type:"lines",
          name:item[0],
          zlevel:2,
          effect:{
            show:true,
            constantSpeed:20,
            symbol:"triangle",
            symbolSize:6,
            trailLength:0
          },
          lineStyle:{
            color:"#0ff",
            1.5,
            opacity:0.4,
            curveness:0.2
          },
          label:{
            show:true
          },
          data:convertData(item[1])
        }
      )
    })
    let mapBoxOption={
      backgroundColor:"#0c1a3c",
      title:{
        text:text,
        textStyle:{
          color:"#fff"
        },
        left:"center",
        top:26
      },
      tooltip:{
        show:true
      },
      geo:{
        map:"china",
        roam:true,
        aspectScale:0.75,
        zoom:1,
        label:{
          show:false,
          textStyle:{
            color:"#00a0c9"
          }
        },
        itemStyle:{
          areaColor:"#0f1f48",
          borderColor:"#3598dc"
        },
        emphasis:{
          label:{
            show:false,
            textStyle:{
              color:"#00a0c9"
            }
          },
          itemStyle:{
            borderWidth:0,
            borderColor:"#0066ba",
            areaColor:"#0f1f48",
            shadowColor:"rgba(0,0,0,0.5)"
          }
        },
        left:"16%",
        top:"12%",
        tooltip:{
          show:true,
          formatter:function(par){
            if(par.componentType==="series"){
              if(par.data.info){
                return (par.data.info[0]+"->"+par.data.info[1]+":"+par.data.info[2])
              }
            }
          }else{
            return ""
          }
        }
      },
      series:series
    }
    that.charts.setOption(mapBoxOption)
    that.charts.resize()
  },
  getStore(){
    this.cityName = JSON.parse(window.localStorage.getItem("store")).user.userInfo.organizationName
  }
};
</script>
<style></style>

echarts热力图

<template>
  <div :id="id" style=" 100%; height: 100%"></div>
</template>
<script>
import resize from "@/util/resize";
export default {
  mixins: [resize],
  name: "heatMap",
  props: {
    id: {
      type: String,
      default: "heatMap",
    },
    comJSON: {
      type: Object,
      default: function () {
        return { data: {}, config: {} };
      },
    },
  },
  data() {
    return {
      charts: null,
    };
  },
  watch: {
    comJSON: {
      handler: function () {
        this.drawLineChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.drawLineChart();
  },
  methods: {
    drawLineChart() {
      //set data and config
      let titleName = this.comJSON.data.title ? this.comJSON.data.title : "";
      let min = this.comJSON.config.min ? this.comJSON.config.min : 0;
      let max = this.comJSON.config.max ? this.comJSON.config.max : 100;
      let xName =
        this.comJSON.data.xArray && this.comJSON.data.xArray.length
          ? this.comJSON.data.xArray
          : [];
      let yName =
        this.comJSON.data.yArray && this.comJSON.data.yArray.length
          ? this.comJSON.data.yArray
          : [];
      let chartData =
        this.comJSON.data.chartData && this.comJSON.data.chartData.length
          ? this.comJSON.data.chartData
          : [];
      chartData = chartData.map(function (item) {
        return [item[0], item[1], item[2] || "-"];
      });

      let series = [];
      let option = {
        title: {
          text: titleName,
          top: "4%",
          left: "center",
        },
        tooltip: {
          position: "top",
        },
        grid: {
          height: "auto",
          top: "16%",
        },
        xAxis: {
          type: "category",
          data: xName,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          name: "单位：面积",
          data: yName,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: true,
          },
        },
        visualMap: {
          min: min,
          max: max,
          inRange: {
            color: ["#8fdffd", "#8ec8fe", "#59adfc", "#2e99fd", "#3082fe"],
          },
          calculable: true,
          inverse: true,
          top: "10%",
          left: "center",
          orient: "horizontal",
          type: "piecewise",
        },
        series: [
          {
            type: "heatmap",
            data: chartData,
            label: {
              show: true,
            },
            itemStyle: {
              borderWidth: "2",
              borderColor: "#fff",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0,0,0,0.5)",
              },
            },
          },
        ],
      };
      if (this.charts) {
        this.charts.dispose();
      }
      this.charts = this.$echarts.init(document.getElementById(this.id));
      this.charts.setOption(option, true);
      this.charts.resize();
    },
  },
};
</script>
<style lang="scss" scoped></style>