关于前端:如何在vuejs中使用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',...}]

配置柱形图或者折线图的款式就在元素外面增加属性批改就