表格作图的好帮手-Echart

最新推荐文章于 2024-09-06 10:47:36 发布

MarmotCoder

最新推荐文章于 2024-09-06 10:47:36 发布

阅读量6.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_29580525/article/details/76616932

版权

本文介绍了如何使用Echarts库来创建图表，包括导入第三方包、引入Echarts组件、定义图表option以及绑定option的步骤。此外，还提到了Echarts的一些常见图表配置选项。

摘要由CSDN通过智能技术生成

Echarts官方文档：
https://echarts.baidu.com/echarts2/doc/doc.html

一、导入第三方包

npm install native-echarts --save

二、导入Echarts组件

import Echarts from 'native-echarts

三、定义option

echartsOption.png

option = {
    //设置图表边距
    grid:{
            left:0,
            right:15,
            top:15,
            bottom:15,
            containLabel: true
        },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    //图表展示样式切换按钮
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},