1、准备工作
- 首先在echarts官方选择好自己需要使用的图表,并配置完成
- 新建一个vue文件
2、正式配置
HTML代码段:
注意id内的命名与下述getElementById一致
<template>
<div id="main" style="width:50%;height:376px"></div>
</template>
SCRIPT代码段:
注意mounted内的函数名与下述methods函数名一致
export default {
mounted(){
this.drawChart()
},
}
建立methods:{},内嵌函数drawChart()
methods: {
drawChart() {
let myChart = this.$echarts.init(document.getElementById("main"));
let option;
{此处为代码粘贴处}
}
myChart.setOption(option);
}
以上都是所有图表必须的内容,接着这里终于可以使用上我们在echarts官方选择好自己需要使用的图表
配置好的图表,复制“代码编辑”-“JS”内的所有内容,粘贴至上述描述的位置
运行,成功!
关于一个图表组件需要使用两次及以上,可参考在 vue 中使用 echarts 的详细步骤