vue 引入echart使用

最新推荐文章于 2024-02-08 13:43:38 发布

哆啦A梦的百宝箱口袋

最新推荐文章于 2024-02-08 13:43:38 发布

阅读量543

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/u013141712/article/details/115544300?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166693826716782388016142%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166693826716782388016142&biz_i

版权

第一步：安装echarts依赖

cnpm install echarts -S

第二步：在main.js中全局引入

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

第三步：在你的组件或页面中 a.vue

<div id="myChart" :style="{width: '600px', height: '600px'}"></div>

js部分代码：
export default {
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
});
}
}
}