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

1.引入echarts 【如何在vue.js中使用echart来实现柱形图、折线图等基础图形】在index.html页面cdn引入echarts，也可以用npm方式引入

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

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里面的一个图形，比如