npm install echarts --save
// main.js文件中引入并全局注册
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)

下面在项目里就可以直接使用echars了 正常是这样的 不过可能会报错(“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘…) 就是echart并没引入进来 这时候 有可能是因为echarts的版本过高 执行下面解决问题

npm ls echarts  //查看echarts的版本
npm uninstall echarts //卸载
npm install echarts@4.9.0
npm fund
npm run dev

下面就可使用啦!

html

<div style="width: 300px; height: 300px;" ref="echarts"></div>

vue 项目的话 直接在mounted中调用这个函数即可

    initCharts() {
      let self = this
      let myChart = this.echarts.init(this.$refs.echarts)
      console.log(this.$refs.chart) // 绘制图表
      let option = {
        // title: {
        //   text: 'ADP_NP.log',
        // },
        color: ['#66b1ff'],	
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              show: true,
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20,
            },
                        data: [{
                name: '节点1',
                x: 100,
                y: 300
            }, {
                name: '节点2',
                x: 230,
                y: 200
            }, {
                name: '节点3',
                x: 400,
                y: 250
            }, {
                name: '节点4',
                x: 350,
                y: 350
            }, {
                name: '节点5',
                x: 250,
                y: 400
            }],
            // links: [],
            links: [
            {
                source: '节点1',
                target: '节点2'
            }, {
                source: '节点2',
                target: '节点3'
            }, {
                source: '节点3',
                target: '节点4'
            }, {
                source: '节点4',
                target: '节点5'
            }, {
                source: '节点5',
                target: '节点1'
            }],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
          },
        ],
      }
      myChart.setOption(option)
      myChart.on('click', function (params) {
        self.logShow = true
      })
    },
Logo

前往低代码交流专区

更多推荐