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

houqq

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',...}]

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

阅读 424
222 声望
12 粉丝
0 条评论
你知道吗?

222 声望
12 粉丝
文章目录
宣传栏