Apache ECharts

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
//或者找到本地文件dist/echarts.min.js引入
<script src="../echarts-5.5.1/package/dist/echarts.min.js"></script>

3. 为ECharts准备一个定义了宽高的DOM
一般会用div标签，这个div图表容器决定了图表显示在哪里

<div id="main" style="width: 600px; height: 400px"></div>

4. 基于准备好的DOM，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'))

5. 指定图表的配置项和数据

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

6. 使用刚指定的配置项和数据显示图表

myChart.setOption(option)

最终显示效果如图：

3. 图表容器的大小

1. 因为echarts需要在调用 echarts.init 初始容器时需保证容器已经有宽度和高度，所以官方推荐的做法是 “在 HTML 中定义有宽度和高度的父容器 ”

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

2. 通过调用 echartsInstance.resize，我们可以动态改变图表的大小，比如当页面大小变化时，监听页面的resize 事件：

<div id="main" style="width: 100%;height:400px;"></div>
var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });

也可以直为图表设置特定的大小

myChart.resize({
  width: 800,
  height: 400
});

4. Option常用配置项

echarts的配置项有很多，没必要死记硬背，了解常用的部分，在需要使用的时候能够正确查询即可。可以对比这个（ ECharts图表集—echarts gallery社区）网站的例子进行练习

1. 基础配置项

title 标题组件

myChart.setOption({
    //配置图表标题组件
    title: {
      show: true, // 是否显示标题，默认true
      text: "图表主标题文本", //主标题文本，支持使用 \n 换行。
      textStyle: { //设置主标题文字样式，颜色，字体，阴影等
        color: "#008DFF",
      },
      subtext: '图表副标题文本' ,
      left: 200, //title 组件离容器左侧的距离
      backgroundColor: '#ccc' //标题背景色，默认透明。
    },
});

tooltip提示框组件

tooltip: {
    show: true,     //是否显示提示框组件,默认为false
    trigger: 'axis',//触发类型，鼠标悬停在，如'item'、'axis'等 ，上面时触发
    triggerOn: 'mousemove' //触发条件,可选mousemove（鼠标移动时触发）、click（点击触发）、mousemove|click（鼠标移动或点击时触发）
    axisPointer: {  //配置坐标轴上指示器的样式和行为
        type: 'cross',//指示器的类型，如十字线cross，
        crossStyle: {//配置十字线的样式
            color: '#999'
        }
    }
},

比如我们给 “2.基础使用”中的例子加上：

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: { color: '#999'}
        }
    },
    //.....其他
}

当你把鼠标移动到图表上时：

legend 图例组件

当有多条数据时展示了数据分类展示；如下

var option = {
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    legend: {
        data: ['库存量', '销量']
    },
    series: [
        {
            name: '库存量',
            type: 'bar',
            data: [10, 20, 50, 25, 66, 33]
        },
        {
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
}

2.坐标配置项

grid网格组件

grid: {
//网格距离容器各边的距离
    top: '18%',
    bottom: '10%',
    left: '10%',
    right: '5%'
},

xAxis 直角坐标系 grid 中的 x 轴

//配置直角坐标系 grid 中的 x 轴
xAxis: {
  show: true, // 是否显示 x 轴,默认true
  type: "category", //坐标轴类型。默认category(类目轴)，其他值：value(数值轴),time(时间轴),log(对数轴)
  name: "x轴名字", //坐标轴名称。
  nameLocation: "center", //坐标轴名称显示位置。
  nameTextStyle: {}, //坐标轴名称的文字样式
  inverse: true, //是否是反向坐标轴。默认false    
  axisLabel:{//坐标轴刻度标签的相关设置。
    show: true, //是否显示刻度标签。
    color: "red", //刻度标签文字的颜色，默认取 axisLine.lineStyle.color。支持回调函数
  },
  data: [
    "足球",
    "篮球",
    "乒乓球",
    "跳绳",
    "健步走",
    "呼啦圈",
    "踢毽",
    {
      value: "霹雳舞",
      textStyle: { fontSize: 20, color: "red"},//类目标签的文字样式
    },
  ],
  //Array,类目数据，在类目轴（type: 'category'）中有效。
  //如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
  //如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取
},

yAxis 直角坐标系 grid 中的 y 轴

y轴属性与x轴属性相似，需特别注意的是，type属性默认值不同

yAxis: {
  type: "value", //坐标轴类型。默认值value，x轴type默认值为category
},

比如。我们把 “2.基础使用” 中的竖向柱状图改为横向柱状图：

var option = {
    xAxis: { type: 'value' },
    yAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
}

3. 系列配置项（series）

series：系列的配置项，用于定义图表中的数据系列

series: [
    {
        name: '库存量', //系列名称
        type: 'bar', //图标类型，如bar,line，pie等
        data: [10, 20, 50], //系列数据
        lable: {
            show: true, //是否显示标签
            position: 'top' //标签显示位置
        },
        itemStyle: {
            color: 'green', //系列项的颜色
            borderColor: 'yellow' //系列项的边框颜色
        },
        emphasis: {
            //系列的高亮样式配置项
            itemStyle: {
                //高亮时的图形样式
                color: 'red'
            },
            label: {} //高亮时的标签样式
        }
        //其他配置项
    },
    {
        //其他数据系列
        // .......
    }

官方教程文档地址：Documentation - Apache ECharts

不同版本的ECharts可能会有一些差异，建议查阅ECharts官方文档来获取最新的配置项信息。

若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃 共勉！💪

如果我的文章对你有帮助，你的赞👍就是对我的最大支持^_^

原文地址：https://blog.csdn.net/m0_61619549/article/details/142885907

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：kafka常见面试题总结
下一篇：工位管理优化：Spring Boot企业级系统

使用pktgen进行高吞吐发包
使用pktgen，能够高效方便地发送测试流量，不用自己再费劲巴拉写代码了，而且linux系统基本都具备，真是一个非常不错的工具！
阅读更多2024-11-14
【STM32F1】——9轴姿态传感器JY901与IIC通信
电压：3.3-5V量程：X/Z轴 ±180°， Y轴 ±90°通信方式：IIC、UART（默认9600波特率）型号区别：JY901S（带温补），JY901B（带气压）帧头格式：以角度输出为例，回传数据
阅读更多2024-11-14
准双向/弱上拉（标准8051输出模式）、仅为输入（高阻）、开漏输出、推挽输出、上拉电阻、下拉电阻都是什么？
在这种模式下，当输出为低电平时，输出端会与地连接（逻辑0），而当输出为高电平时，输出端会处于“高阻”状态（不驱动电流）。与开漏不同，推挽输出能够直接驱动电流，无需外部上拉电阻，适合需要强驱动能力的应用
阅读更多2024-11-14
linux的基础指令
用户可以通过修改LS_COLORS环境变量来自定义颜色配置。34:ln=01;36:ex=01;35'di：目录ln：符号链接ex：可执行文件*.tar.gz：压缩文件*.zip：压缩文件*.jpg：
阅读更多2024-11-14
要查看你的系统是 x64（64位）还是 x86（32位），可以按照以下步骤操作
通过以上方法，你可以轻松地确定你的系统是x64（64位）还是x86（32位）。这对于安装软件、配置开发环境以及解决兼容性问题非常重要。
阅读更多2024-11-14
sql专题之 count()区别
sql语句count(*)、count（1）、count（列名）的区别
阅读更多2024-11-14
【数据库】数据库设计
数据库设计是根据业务系统的具体需要，结合我门所选用的DBMS(数据库管理系统)，为这个业务系统构造出最优的数据存储模型，并建立好数据库中的表结构及表与表之间的关联关系的过程。使之能有效的对应用系统中的
阅读更多2024-11-14
最全最简单理解迭代器
迭代器变量定义使用iterator关键字，形式为：容器<类型>：——iteaator 变量名（如：std::vector<int>::iterator a、vector&l
阅读更多2024-11-14
商标注册没有下来可以先使用吗？
商标注册没有下来可以先使用吗？商标没有注册下来，最好先不要使用，原因如下：1、侵犯商标所有人的商标权：未注册商标在使用过程中可能侵犯商标所有人的商标权，商标所有人可能采取法律行动来保护其权益。3、可能
阅读更多2024-11-14
软件测试面试2024最新热点问题
兼容测试主要是检查软件在不同的硬件平台、软件平台上是否可以正常的运行，即是通常说的软件的可移植性。兼容的类型，如果细分的话，有平台的兼容，网络兼容，数据库兼容，以及数据格式的兼容。兼容测试的重点是，对
阅读更多2024-11-14