如何在vue.js中使用echart来实现柱形图、折线图等基础图形

1.引入echarts

在index.html页面cdn引入echarts，也可以用npm方式引入
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2.准备一个具备宽高的容器来绘制echarts

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="echart1" style="width: 600px;height:400px;"></div>

3.通过init方法初始化一个echarts实例，并且使用setOption方法配置echarts

var myChart = echarts.init(document.getElementById('echart1'));
//配置
let option = {}
// 将option里面定义好的配置项通过setOption方法绘制echarts
myChart.setOption(option)

---

以上流程基本上就是绘制echarts的基本方法，但是怎么配置柱形图、折线图、甚至是一些比较复杂的统计图呢。这个就需要我们修改option里面的配置项。也就是echarts的核心就是配置option

---

配置option
常用的有以下几个
1.title组件：配置标题，包括主标题和副标题
2.legend组件：图例组件，配置图例的颜色、类型、样式
3.grid组件：一般设置其top、left、bottom、right来调整echarts的位置
4.tooltip组件：配置提示框
5.xAxis：配置x轴的参数
6.yAxis：配置y轴的参数
7.series 这个参数是个数组类型的，一般来说series数组里面的一个元素对应echarts里面的一个图形，比如

series:[{type:"line",...},{type:"line",...}]

那么这里面就代表两种折线图，
如果要一种用折线图、一种用柱形图
那么就是

series:[{type:'line',...},{type:'bar',...}]

配置柱形图或者折线图的样式就在元素里面添加属性修改就