qiangmj / report-ui

<!--
气泡图
 !-->
<template>
  <div :class="styleObj" id="container"></div>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  name: "WidgetBubblechart",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data(){
    return {
      chart:null,//图表对象
      showData:[//图表中将要显示的数据
        {
          "year": "1956 年",
          "sales": 61,
          "size": 21,
          "group": "分组1"
        },
        {
          "year": "1957 年",
          "sales": 145,
          "size": 45,
          "group": "分组1"
        },
        {
          "year": "1958 年",
          "sales": 48,
          "size": 68,
          "group": "分组1"
        },
        {
          "year": "1959 年",
          "sales": 38,
          "size": 78,
          "group": "分组1"
        },
        {
          "year": "1960 年",
          "sales": 38,
          "size": 18,
          "group": "分组1"
        },
        {
          "year": "1962 年",
          "sales": 38,
          "size": 18,
          "group": "分组1"
        },
        {
          "year": "1956 年",
          "sales": 41,
          "size": 61,
          "group": "分组2"
        },
        {
          "year": "1957 年",
          "sales": 45,
          "size": 25,
          "group": "分组2"
        },
        {
          "year": "1958 年",
          "sales": 68,
          "size": 28,
          "group": "分组2"
        },
        {
          "year": "1959 年",
          "sales": 48,
          "size": 28,
          "group": "分组2"
        },
        {
          "year": "1960 年",
          "sales": 28,
          "size": 78,
          "group": "分组2"
        },
        {
          "year": "1962 年",
          "sales": 18,
          "size": 38,
          "group": "分组2"
        }
      ],
    }
  },
  created(){

  },
  computed: {
    styleObj() {
      return {
        position: this.ispreview ? 'absolute' : 'static',
        width: this.optionsStyle.width + 'px',
        height: this.optionsStyle.height + 'px',
        left: this.optionsStyle.left + 'px',
        top: this.optionsStyle.top + 'px',
        background: this.optionsSetup.background
      };
    }
  },
  mounted(){
    this.init();
  },
  methods:{
    // 初始化
    init(){
      this.createChart();//创建chart
      this.setChartData();//设置字段和数据
      this.setChartAxis();//设置坐标轴和度量
      this.setChartTooltip();//设置提示信息
      this.chart.interaction('element-active');//设置图表样式
      this.setChartStyle();//设置图表柱子相关属性
      // this.chart.legend(false);//设置为false，表示不显示图例
      this.setChartLegend();//设置图例
      this.setChartAnimate();//设置动画
      //渲染图表
      this.chart.render();
      //添加点击事件
      this.addClickEvent();

    },
    //创建chart
    createChart(){
      this.chart = new Chart({
        container: 'container',//chart容器id
        autoFit: false,//图表是否自适应容器宽高，默认为 false
        width: 800,//图标宽度
        height: 400,//图表高度
        padding: [40, 120, 80, 120],//图表内边距,依次为:上，右，下，左
        // defaultInteractions:"ellipsis-text",//配置图表默认交互，仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'
        pixelRatio:window.devicePixelRatio,//设置设备像素比，默认取浏览器的值 window.devicePixelRatio
        renderer:"canvas",//指定渲染引擎，默认使用 canvas。可选：'canvas' | 'svg'
        theme:"dark",//配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。
        visible:true,//chart 是否可见，默认为 true，设置为 false 则会隐藏。
      });
    },
    //设置数据
    setChartData(){
      this.chart.data(this.showData);
    },
    //设置坐标轴
    setChartAxis(){
      var scale={};
      scale["sales"]={
        type: 'pow',
        nice: true,
      }
      scale["size"]={
        type: 'pow',
        nice: true,
      }
      this.chart.scale(scale, {//Y轴 字段是 度量
        nice: false,//是否自动调整 min、max 。默认为false
        min: 10,//度量最小值，
        max: 120,//度量最大值，如果不需要指定最大值可以设置max=null，或者不要填该参数
      });
      //设置Y轴
      //this.chart.axis("sales",false);//不需要Y轴，可以设置false
      this.chart.axis("sales", {//Y轴样式
        grid:{
          line:{
            type:"line",
            style:{
              // fill:'#ff0000',
              stroke:"#fff",//网格线颜色
              opacity:0.3,//网格线透明度
              lineDash:[1,3],//虚线
            }
          },
        },
        label:{
          style:{
            fill:"#fff",///Y轴文字颜色
            fontFamily: "Microsoft YaHei",///Y轴文字字体
            fontWeight: 400,///Y轴文字粗细
            fontSize: 12,///Y轴文字大小
          }
        },
        line:{
          style:{
            stroke:"#fff",//坐标轴颜色
          }
        },
        tickLine: {
          style:{
            stroke:"#fff",//刻度线颜色
          }
        },
        subTickLine:{
          style:{
            stroke:"#fff",//小刻度颜色
          }
        }
      });

      //设置X轴
      //this.chart.axis("year",false);//不需要Y轴，可以设置false
      this.chart.axis("year", {//X轴样式

        label: {
          formatter: (val) => {
            return val;
            // return +val * 100 + '%';
          },
          style:{
            fill:"#fff",//文字颜色
            fontFamily: "Microsoft YaHei",//文字字体
            fontWeight: 400,//文字粗细
            fontSize: 12,//文字大小
          }
        },
        line:{
          style:{
            stroke:"#fff",//坐标轴颜色
          }
        },
        tickLine: {
          style:{
            stroke:"#fff",//刻度线颜色
          }
        },
        subTickLine:{
          style:{
            stroke:"#fff",//小刻度颜色
          }
        }
      });
    },
    //设置提示框信息样式
    setChartTooltip(){
      this.chart.tooltip({
        showMarkers: false,
        showCrosshairs: false,
        domStyles:{
          'g2-tooltip':{
            background:"rgba(00, 00, 00,0.5)",//背景RGBA形式的值
            color:"#ffffff",//文字颜色
            boxShadow:"0px 0px 5px #000000",//阴影大小 阴影颜色
          },
        },
        customItems: (items) => {//自定义显示的内容格式
          // console.log("items")
          // console.log(items)
          // items[0].name="sales";
          return items;
        },
      });
    },
    //设置图表气泡相关属性【气泡样式】
    setChartStyle(){
      var line=this.chart.point();

      line.size(6)//圆点大小
        .style({
          // strokeOpacity:1,
          // fill: this.attrs.style.pointColor,
          stroke:"#fff",//圆点边框颜色

        })
        .state({
          // selected:{
          //   style:{
          //     stroke:'red',
          //   }
          // }
          active:{
            style:{
              stroke:"#2681ff",//鼠标经过 边框颜色
            }
          }
        })
        .position("year"+"*"+"sales")//X轴 * Y轴
        .size("size"+"",[1,40])//气泡半径范围 1-30
        .color("group", ["#2681ff","#00ff44","#2611ff","#26aa99"])//参数1：group字段为分组字段，参数2：颜色数组，散点的颜色会循环的从颜色数组中取出来
        .tooltip("year"+"*"+"sales"+"*"+"size"+"*"+"group")
        .shape('circle');
      //柱子上是否显示值标签
      //line.label(false);//不需要显示，可以设置false
      line.label("sales", {//标签值
        content: (originData) => {
          return originData["sales"]+"万";//设置值标签最终显示的内容
        },
        style: {
          fill: "#fff",
          fontFamily: "Microsoft YaHei",
          fontWeight: 400,
          fontSize: 16,
          // fill: "#ffffff",
        },
        position:"top",//显示位置
      })
    },
    //设置图例
    setChartLegend(){

      // this.chart.legend(false);//设置为false，表示不显示图例

      this.chart.legend("group", {
        position: "bottom",//图例位置："top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "left" | "left-top" | "left-bottom" | "bottom" | "bottom-left" | "bottom-right"
        itemName:{
          style:{
            fill: "#fff",
            fontFamily: "Microsoft YaHei",
            fontWeight: 400,
            fontSize: 16,
          }
        },
        pageNavigator: {
          marker: {//分页器指示箭头配置项
            style: {
              // 非激活，不可点击态时的填充色设置
              inactiveFill: "#fff",//分页器：箭头颜色
              inactiveOpacity: 1,//分页器：箭头透明度
              // 默认填充色设置
              fill: "#fff",//分页器：颜色
              opacity: 1,//分页器：透明度
              size: 12,//分页器：大小
            },
          },
          text: {//分页器指示文本配置项
            style: {
              fill: "#fff",//分页器：文本颜色
              fontSize: 12,//分页器：文本大小
            },
          },
        },
      });
    },
    //设置动画
    setChartAnimate(){
      // this.chart.animate(false);//设置为false，表示不使用动画效果
      this.chart.animate({
        // 初始化时的入场动画
        appear: {
          animation: 'fade-in', // 动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'
          easing: 'easeQuadIn', // 动画缓动效果
          delay: 100, // 动画延迟执行时间
          duration: 600 // 动画执行时间
        },
        // 更新时的出现动画
        enter: {
          animation: 'fade-in', //动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'
          easing: 'easeQuadIn', // 动画缓动效果
          delay: 100, // 动画延迟执行时间
          duration: 600 // 动画执行时间
        },
        // 更新时的动画
        leave: {
          animation: 'path-out', //动画名称:'fade-out'|'path-out'|'zoom-out'|'lineWidth-out'
          easing: 'easeQuadIn', // 动画缓动效果
          delay: 100, // 动画延迟执行时间
          duration: 600 // 动画执行时间
        },
        // 更新时的变化动画
        update: {
          animation: 'fade-in', //动画名称:'fade-in'|'fan-in'
          easing: 'easeQuadIn', // 动画缓动效果
          delay: 100, // 动画延迟执行时间
          duration: 600 // 动画执行时间
        },
      })
    },
    //添加点击事件
    addClickEvent(){
      this.chart.on('element:click', (ev) => {
        var data=ev.data.data;
        console.log(data);
        alert(JSON.stringify(data));
      });
    }
  },
}
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container{width:800px; height: 800px; margin: 100px auto; background: cadetblue;}
</style>