码迷,mamicode.com
首页 > 其他好文 > 详细

echart关系图

时间:2020-08-18 13:16:24      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:com   label   mat   targe   ref   image   func   ems   link   

    echart3(){
      let keyWord = [
        {
          name: ‘考研‘,
          value: 12,
          x: 200,
          y: 2,
          color: ‘#532‘
        },
        {
          name: ‘兼职‘,
          value: 13,
          x: 0,
          y: 0,
          color: ‘#463‘
        },
        {
          name: ‘食堂‘,
          value: 21,
          x: 0,
          y: 0,
          color: ‘#835‘
        },
        {
          name: ‘家教‘,
          value: 2,
          x: 0,
          y: 0,
          color: ‘#937‘
        },
        {
          name: ‘学生‘,
          value: 52,
          x: 0,
          y: 0,
          color: ‘#4a2‘
        },
        {
          name: ‘研友‘,
          value: 22,
          x: 0,
          y: 0,
          color: ‘#902‘
        },
      ]
      let datas = []
      let links = []
      keyWord.forEach((item, i)=>{
        datas.push({
          name: item.name,
          value: item.value,
          x: item.x,
          y: item.y,
          symbolSize: 70,
          draggable: true,
          itemStyle: {
            normal: {
              borderColor: "#FF4500",
              borderWidth: 4,
              shadowBlur: 100,
              shadowColor: "#FF4500",
              color: item.color,
            }
          },
        })
        links.push(
          {
            source: item.name,
            target: ‘学生‘
          }
        )
      })
      var option = {
        backgroundColor: ‘#fff‘,
        tooltip: {},
        animationDurationUpdate: function(idx) {
            return idx * 100;
        },
        animationEasingUpdate: ‘bounceIn‘,
        color: [‘#fff‘, ‘#fff‘, ‘#fff‘],
        series: [{
            type: ‘graph‘,
            layout: ‘force‘,
            force: {
                repulsion: 300,
                edgeLength: 10
            },
            roam: true,
            label: {
                normal: {
                    show: true,
                    position: ‘inside‘,
                    formatter: ‘{b}‘,
                    fontSize: 20,
                    fontStyle: ‘500‘,
                }
            },
            data: datas,
            links: links
        }]
      }
      this.myChart3 = this.$echarts.init(this.$refs.myechart3);
      this.myChart3.setOption(option);
    },

技术图片

 

echart关系图

标签:com   label   mat   targe   ref   image   func   ems   link   

原文地址:https://www.cnblogs.com/xhrr/p/13509512.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!