• ECharts常用配置

    1.使用：

    （1）.下载引入

    1. npm install echarts@(版本号) --save
    2. import * as echarts from "echarts";

    （2）.准备一个DOM容器

    （3）.初始化echarts实例对象

    echarts.init(document.getElementById("mychart"));

    （4）.指定配置项和数据（option）

    （5）.将配置项设置给echarts实例对象

    chart.setOption(option);

    2.配置基本参数

    2.1title标题常用参数

    2.2tooltip工具提示

    2.3xAxis/yAxis/y轴

    2.4series图表系列信息

    【{}，{}，{}，{}】可以写多个对象，代表多个图像

    具体内容参考官网：Documentation - Apache ECharts

    2.5toolbox 工具箱按钮：feature：{}中的参数

    2.6 legend图例组件

    2.7 grid是否显示绘图网格

    3.常用图形的参数

    3.1柱状图

    官方文档：基础柱状图 - 柱状图 - 常用图表类型 - 应用篇 - Handbook - Apache ECharts

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.   <title>Documenttitle>
    9.   <script src="lib/echarts.min.js">script>
    10. head>
    11.  
    12. <body>
    13.   <div style="width: 600px;height:400px">div>
    14.   <script>
    15.     //1. ECharts最基本的代码结构
    16.     //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    17.     //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86]
    18.     //4. 将type的值设置为bar
    19.     var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
    20.     var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
    21.     var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
    22.     var option = {
    23.       xAxis: {
    24.         type: 'value'
    25.       },
    26.       yAxis: {
    27.         type: 'category',
    28.         data: xDataArr
    29.       },
    30.       series: [
    31.         {
    32.           name: '语文',
    33.           type: 'bar',
    34.           markPoint: { // 标记点
    35.             data: [
    36.               {
    37.                 type: 'max', name: '最大值'
    38.               },{
    39.                 type: 'min', name: '最小值'
    40.               }
    41.             ]
    42.           },
    43.           markLine: { // 标记线
    44.             data: [
    45.               {
    46.                 type: 'average', name: '平均值'
    47.               }
    48.             ]
    49.           },
    50.           label: { // 柱状图上的文字设置
    51.             show: true, // 是否显示
    52.             rotate: 60, // 旋转角度
    53.             position: 'top' // 显示位置
    54.           },
    55.           barWidth: '30%', // 柱的宽度
    56.           data: yDataArr
    57.         }
    58.       ]
    59.     }
    60.     mCharts.setOption(option)
    61.   script>
    62. body>
    63.  
    64. html>

    3.2折线图

    官方文档：基础折线图 - 折线图 - 常用图表类型 - 应用篇 - Handbook - Apache ECharts

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>Documenttitle>
    8.   <script src="lib/echarts.min.js">script>
    9. head>
    10.  
    11. <body>
    12.   <div style="width: 600px;height: 400px">div>
    13.   <script>
    14.     //1. ECharts最基本的代码结构
    15.     //2. x轴数据:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    16.     //3. y轴数据:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    17.     //4. 将type的值设置为line
    18.     var mCharts = echarts.init(document.querySelector('div'))
    19.     var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    20.     var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    21.     var option = {
    22.       xAxis: {
    23.         type: 'category',
    24.         data: xDataArr
    25.       },
    26.       yAxis: {
    27.         type: 'value'
    28.       },
    29.       series: [
    30.         {
    31.           name: '康师傅',
    32.           data: yDataArr,
    33.           type: 'line',
    34.           markPoint: { // 标记点
    35.             data: [
    36.               {
    37.                 type: 'max'
    38.               },
    39.               {
    40.                 type: 'min'
    41.               }
    42.             ]
    43.           },
    44.           markLine: { // 标记线
    45.             data: [
    46.               {
    47.                 type: 'average'
    48.               }
    49.             ]
    50.           },
    51.           markArea: { // 标记区域
    52.             data: [
    53.               [
    54.                 {
    55.                   xAxis: '1月'
    56.                 },
    57.                 {
    58.                   xAxis: '2月'
    59.                 }
    60.               ],
    61.               [
    62.                 {
    63.                   xAxis: '7月'
    64.                 },
    65.                 {
    66.                   xAxis: '8月'
    67.                 }
    68.               ]
    69.             ]
    70.           },
    71.           smooth: true, // 是否为平滑线
    72.           lineStyle: { // 线的样式设置
    73.             color: 'green',
    74.             type: 'solid' // dashed dotted solid
    75.           },
    76.           areaStyle: { // 线和x轴形成的区域设置
    77.             color: 'pink'
    78.           }
    79.         }
    80.       ]
    81.     }
    82.     mCharts.setOption(option)
    83.   script>
    84. body>
    85. html>

    3.3 散点图

    官方文档：基础散点图 - 散点图 - 常用图表类型 - 应用篇 - Handbook - Apache ECharts

    3.4 饼图

    官方地址：基础饼图 - 饼图 - 常用图表类型 - 应用篇 - Handbook - Apache ECharts

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.   <title>Documenttitle>
    9.   <script src="lib/echarts.min.js">script>
    10. head>
    11.  
    12. <body>
    13.   <div style="width: 600px;height:400px">div>
    14.   <script>
    15.     //1. ECharts最基本的代码结构
    16.     //2. 准备数据[{name:???, value:??? },{}]
    17.     //   淘宝: 11231  京东: 22673  唯品会: 6123  1号店: 8989   聚美优品: 6700
    18.     //3. 将type的值设置为pie
    19.     var mCharts = echarts.init(document.querySelector("div"))
    20.     // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
    21.     var pieData = [
    22.       {
    23.         name: '淘宝',
    24.         value: 11231
    25.       },
    26.       {
    27.         name: '京东',
    28.         value: 22673
    29.       },
    30.       {
    31.         name: '唯品会',
    32.         value: 6123
    33.       },
    34.       {
    35.         name: '1号店',
    36.         value: 8989
    37.       },
    38.       {
    39.         name: '聚美优品',
    40.         value: 6700
    41.       }
    42.     ]
    43.     var option = {
    44.       series: [
    45.         {
    46.           type: 'pie',
    47.           data: pieData,
    48.           label: { // 饼图文字的显示
    49.             show: true, // 显示文字
    50.             //formatter: 'hehe' // 决定文字显示的内容
    51.             formatter: function(arg){
    52.               // console.log(arg)
    53.               return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
    54.             }
    55.           },
    56.           // radius: 20 // 饼图的半径
    57.           // radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
    58.           // radius: ['50%', '75%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
    59.           roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
    60.           // selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
    61.           selectedMode: 'multiple',
    62.           selectedOffset: 30
    63.         }
    64.       ]
    65.     }
    66.     mCharts.setOption(option)
    67.   script>
    68. body>
    69.  
    70. html>

  • 相关阅读:
    WebFlux 详解
    Mac软件下载网址
    热门Java开发工具IDEA入门指南——从Eclipse迁移到IntelliJ IDEA（一）
    前端面试的话术集锦第 10 篇：高频考点（实现小型打包工具）
    Python字符编码
    记一次RestTemplate消息类型不匹配的BUG定位
    Qt（day1）
    DolphinDB 四大因子库合集
    【初识SpringBoot核心源码之SpringApplication构造器以及run方法主线流程-3】
    【数据结构与算法】骑士周游算法/马踏棋盘算法的介绍和程序实现
  • 原文地址：https://blog.csdn.net/m0_63701303/article/details/134333301