echart（基于vue开发下）

一、基础篇

1、首先在新建的template文件中创建一个具体宽高的dom容器

<template>
<div>
第一步：domdom容器
<div style="width:100%;height:200px" ></div>
</div>
</template>

2、使用echarts基础步骤,这里使用的依赖是"echarts": “^4.9.0”,版本

<script>
// 第二步：引入echarts
import echarts from 'echarts'
export default {
name: 'EchartsComponents',
methods: {
drawChart() {
//第三步：使用echarts.init方法初始化一个echarts实例
const myChart = echarts.init(document.getElementById(this.echarts))
// 第四步：最后用setOption方法生成简单的图表
myChart.setOption({
title:{},
// 标题组件 
color: [],
// 多种颜色组件
tooltip: {}, // 提示框组件 
legend: {},
// 图例组件，展现了不同系列的标记(symbol)，颜色和名字
XAxis:{}, //直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴
yAxis:{}, //直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴
series: [{}] //系列列表。每个系列通过 type 决定自己的图表类型
})
}
}
}
</script>

​ ‘’人一生会遇到很多朋友，能留下的都算幸运“

最后

以上就是呆萌冬天为你收集整理的echarts基本使用echart（基于vue开发下）的全部内容，希望文章能够帮你解决echarts基本使用echart（基于vue开发下）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。