Echarts基础简述

dpbs

已于 2022-04-21 17:46:59 修改

阅读量1k

点赞数

文章标签： echarts javascript

于 2022-04-18 15:17:27 首次发布

本文链接：https://blog.csdn.net/dpbs_/article/details/124247241

版权

作者对Echarts有简单的使用，再此分享下使用上的经验。该文档主要对Echarts的使用进行简要概述，在本文档能了解到Echarts最简单的基本使用，具体在项目中使用还是在于编码者对官方文档的翻阅。

首先Echarts是一个基于JavaScript的开源可视化图表库，在作者的了解中主要是用于大数据相关方面的可视化图形数据展示，相较于基本的数据表等展示有较高的可读性，在前端开发中主要用作大屏展示。

怎么使用Echarts

Echarts的使用在官方文档-快速上手有基本的使用方法，作者在此也会进行下简述。

web端的使用

在web端的使用思路基本一致，差别基本是引入方式的不同，再此简述两种常用方式：

1.内网开发环境中常用js引入的方式，点击此处进入网址选择 dist/echarts.js，点击并保存为 echarts.js 文件。在html中引入js文件。

<script src="echarts.js"></script>

2.从 npm 获取使用下面命令：

npm install echarts --save

在组件中引用：

import * as echarts from 'echarts';

引入ECharts完成后，需要一个DOM 容器。

 //最简单的ID
 <div id="main" style="width:;height:"></div>
 //初始化
 const myChart = echarts.init(document.getElementById('main'));
 //option的配置
 myChart.setOption(option);
/******************************************/
 //vue2使用
 <div ref="chart" style="width:;height:"></div>
 //初始化
 const myChart = echarts.init(this.$refs.chart);
 //option的配置
 myChart.setOption(option);
/******************************************/
 //vue3使用
 <div ref="iEchart " style="width:;height:"></div>
 //初始化
 const iEchart = ref()
 myChart = echarts.init(iEchart.value);
 //option的配置
 myChart.setOption(option);
/******************************************/
 //.........

上述代码例举了作者常用的三种方式，在这里还是要注意id不要重复的问题。在现在vue3的开发中还是比较推荐ref这种形式。

在上述初始化中省略了option配置下面举个简单的option例子（引用自echarts官网）：

 let option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

在开发中不会是一个数据图就结束了，肯定会有多个图形，所以对echars的封装可以减少代码的冗余度，其中配置更多的就是option这部分，至此Echarts的基本使用就完成了。

小程序中的使用

作者也是刚开始接触小程序开发，在项目中需要使用Echarts所以再次对小程序进行下使用的小经验。在官方文档-应用篇中有Echarts官方提供的使用方法，可以将实例下载下来学习。在作者接触的项目中使用的是秋云 ucharts。/*2022-4-21 官方升级后在线工具要收费了*/

秋云插件封装了部分的Echarts样式，同时提供了一个在线生成工具，若跟设计有差距可以使用在线工具进行生成。在使用过程中还是有部分问题需要根据情况解决的，出现问题后可查询网站的常见问题和使用帮助基本遇到的问题可以走配置解决，但是部分特殊机型可能会出现使用性能的问题，如tooltip点不开等。对于普通项目还是比较推荐这个插件的，但还是要以官方提供的为主，官方肯定会不断进行维护。

option的配置样例

echarts在使用上花时间最多的就是option的配置了，其中包括数据和图形样式，数据上有两种存储格式，具体采用哪种还是要根据业务场景来。图形样式上官方文档提供的挺全的，但是自己和同事都是感觉官方的文档可读性还是挺差的哈哈，基本还是要靠百度或者CSDN等平台查阅了，在此简单介绍下option的常用配置。

let option = {
        xAxis: {//x轴
            axisTick: {
                show: false,//是否显示坐标刻度
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)",//坐标轴颜色
                },
            },
            type: "category",//坐标轴类型
            data: [],//x轴数据
            axisLabel: {//x轴数据
                formatter: function (value) {//格式化
                    return value;

                },
                textStyle: {
                    color: "white", //x轴字体颜色
                },

            },

        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false,//是否显示坐标刻度
            },
            axisLine: {
                show: true, //不显示坐标轴线
            },
            axisLabel: {
                formatter: "{value}% ",
                textStyle: {
                    color: "white", //y轴字体颜色
                },
            },
            splitLine: {
                show: true,
                lineStyle: {color: ['rgba(255, 255, 255, 0.1)'], width: 1, type: 'solid'}
            },
        },
        tooltip: {//弹窗
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            borderColor: "rgba(255,255,255,0.1)",
            axisPointer: {
                type: "shadow",
                label: {
                    show: true,
                    backgroundColor: color,
                },
            },
            textStyle: {
                color: "white",
            },
        },
        grid: {//图形边距等调整
            left: '4%',
            right: '5%',
            bottom: '7%',
            top: '6%',
            containLabel: true,
        },
        series: [
            {// 上层块
                name: "电量", // blue bar
                type: "pictorialBar",
                symbol: "roundRect",
                barWidth: '11%', //柱图宽度
                barMaxWidth: '20%', //最大宽度
                symbolMargin: '3', //图形垂直间隔
                animationDelay: (dataIndex, params) => { //每个图形动画持续时间
                    return params.index * 50;
                },
                symbolOffset: [0, 0],
                itemStyle: {
                    normal: {
                        barMaxWidth: "70%",
                        barBorderRadius: 200,
                        color: "#FF7500",
                    },
                },
                symbolRepeat: true,
                symbolSize: [15, 5], //图形元素的尺寸
                // symbolClip: true,
                data: [],

            },

        ],
    }

效果如下：