vue全局引入echarts
npm install echarts --save// main.js文件中引入并全局注册import Echarts from 'echarts'Vue.prototype.echarts = EchartsVue.use(Echarts)下面在项目里就可以直接使用echars了正常是这样的 不过可能会报错(“export ‘default‘ (imported as ‘echarts‘) w
·
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
})
},
更多推荐
已为社区贡献7条内容
所有评论(0)