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

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