VUE实现echarts（悲惨世界人物关系图示例）

最新推荐文章于 2023-11-24 16:02:42 发布

qq_53406680

最新推荐文章于 2023-11-24 16:02:42 发布

阅读量2.1k

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/qq_53406680/article/details/122346396

版权

1.引入echarts

npm i echarts

2.main.js中导入

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/les-miserables.json，下载echarts的图表数据（json文件），放入components文件下，以备导入

4.导入json文件,并做以下配置

import root from '@/components/les-miserables.json'


mounted() {
    this.setecharts()
  },
methods: {
    setecharts() {
      let myChart = this.$echarts.init(document.getElementById('box'))
      var option
      myChart.showLoading()
      JSON.stringify(root, function () {
        console.log(root)
        myChart.hideLoading()
        root.nodes.forEach(function (node) {
          node.label = {
            show: node.symbolSize > 30,
          }
        })
        option = {
          title: {
            text: 'Les Miserables',
            subtext: 'Circular layout',
            top: 'bottom',
            left: 'right',
          },
          tooltip: {},
          legend: [
            {
              data: root.categories.map(function (a) {
                return a.name
              }),
            },
          ],
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              name: 'Les Miserables',
              type: 'graph',
              focusNodeAdjacency: true, //当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
              layout: 'circular',
              circular: {
                rotateLabel: true,
              },
              data: root.nodes,
              links: root.links,
              categories: root.categories,
              roam: true,
              label: {
                position: 'right',
                formatter: '{b}',
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3,
                opacity: 1,
                width: 1.2,
              },
            },
          ],
        }
        myChart.setOption(option)
      })
    },
  },