Black horse pink teacher Echarts data visualization notes

Introducing the Visualization Panel

​ In response to the current trend of data visualization, more and more companies need to use it in many scenarios (marketing data, production data, user data). Visual charts are used to display and reflect the data, making the data more intuitive and the characteristics of the data more prominent.

01 - Using Technology

Completion of this project requires knowledge of:

• div + css layout
• flex layout
• Less
• Native js + jquery use
• rem adaptation
• echarts basics

02- Case adaptation plan

• The design draft is 1920px

  1. flexible.js divides the screen into 24 equal parts

  2. The base value of the cssrem plugin is 80px

     Plug-in-Configuration Button-Configure Extended Settings-Root Font Size.

     But don't forget to restart the vscode software to ensure it takes effect

03-Basic settings

• body sets the background image, scaled to 100%, row height 1.15
• css initialization

04-header layout

• height is 100px
• Background image, displayed inside the container
• Scale to 100%
• h1 title part white 38 pixels centered display row height is 80 pixels
• The time module showTime locates the right side at 30px, the line height is 75px, the text color is: rgba(255, 255, 255, 0.7) and the text size is 20 pixels

// 格式： 当前时间：2020年3月17-0时54分14秒
<script>
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
    
    
                clearTimeout(t);//清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行     
            }
 </script>

• header part css style

header {
    
    
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  h1 {
    
    
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    
    
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
  }
}

05-mainbox main module

• Need a 10px padding on the left and right

• column column container, divided into three columns, ratio 3:5:3

css style:

.mainbox {
    
    
  padding: 0.125rem 0.125rem 0;
  display: flex;
  .column {
    
    
    flex: 3;
  }
  &:nth-child(2) {
    
    
    flex: 5;
  }
}

06-Public panel module panel

• height is 310px
• 1px solid rgba(25, 186, 139, 0.17) border of 1px
• There is a line.jpg background image
• The padding is 0 for the top, 15px for the bottom, and 40px for the bottom
• Bottom margin is 15px
• Use the panel box before and after to make the top two corners 10px and the line 2px solid #02a6b5
• Add a new box before and after to make the bottom two corners with a width and height of 10px

.panel {
    
    
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  &::before {
    
    
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    
    
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
    
    
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
    
    
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
    
    
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}

07- Column chart bar module (layout)

• Header module h2 height is 48px text color is white text size is 20px

• Icon content module chart height 240px

• The above can be used as the public style part of the panel

  h2 {
    
    
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
  }
  .chart {
    
    
    height: 3rem;
    background-color: pink;
  }

08-Intermediate layout

• The above is no digital module
• The following is the map map module

1. The number module no has a background color rgba(101, 132, 226, 0.1); has a padding of 15 pixels
2. Note that the middle column has a margin of 15px left and right 10px
3. no The upper and lower divisions in the module are numbers on the top (no-hd) and related text descriptions below (no-bd)
4. no-hd digital blocks have a border 1px solid rgba(25, 186, 139, 0.17)
5. The no-hd digital module is divided into two small lis, the height of each small li is 80px, the text size is 70px, the color is #ffeb7b, and the font is the icon font electronicFont
6. no-hd Use after and before to make 2 small corners, border 2px solid #02a6b5 width 30px height 10px
7. The small vertical line can be given to the first small li after. The background color is rgba(255, 255, 255, 0.2); the height is 50% top 25%.
8. There are also two small li in no-bd, the height is 40px, the text color is rgba(255, 255, 255, 0.7), the text size is 18px, and the top padding is 10px

/* 声明字体*/
@font-face {
    
    
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

Map module production:

1. The height of the map module is 810px, which contains 4 boxes chart, put the chart module sphere box rotation 1 rotation 2
2. The size of the sphere image module map1 is 518px. A background image needs to be added because it needs to be scaled to 100% and positioned to the most central transparency.3
3. Rotate 1 map 2 with a size of 643px to add a background image because it needs to be scaled to 100% and positioned to the central transparency. 6 Do rotation animation and use z-index to press the sphere
4. Rotate 2 The size of map3 is 566px. A background image needs to be added because it needs to be scaled 100% to be positioned in the center. Note that the rotation animation is counterclockwise

 <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>125811</li>
                        <li>104563</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="chart"></div>
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>

intermediate style

/* 声明字体*/
@font-face {
    
    
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
.no {
    
    
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
  .no-hd {
    
    
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
    
    
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }
    &::after {
    
    
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }
    ul {
    
    
      display: flex;
      li {
    
    
        position: relative;
        flex: 1;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.875rem;
        color: #ffeb7b;
        padding: 0.05rem 0;
        font-family: electronicFont;
        font-weight: bold;
        &:first-child::after {
    
    
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
    }
  }
  .no-bd ul {
    
    
    display: flex;
    li {
    
    
      flex: 1;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.225rem;
      color: rgba(255, 255, 255, 0.7);
      padding-top: 0.125rem;
    }
  }
}
.map {
    
    
  position: relative;
  height: 10.125rem;
  .chart {
    
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }
  .map1,
  .map2,
  .map3 {
    
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.475rem;
    height: 6.475rem;
    background: url(../images/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    
    
    width: 8.0375rem;
    height: 8.0375rem;
    background-image: url(../images/lbx.png);
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }
  .map3 {
    
    
    width: 7.075rem;
    height: 7.075rem;
    background-image: url(../images/jt.png);
    animation: rotate1 10s linear infinite;
  }

  @keyframes rotate {
    
    
    from {
    
    
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
    
    
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate1 {
    
    
    from {
    
    
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
    
    
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

09-Echarts-Introduction

Common data visualization libraries:

• D3.js is currently the most highly rated Javascript visualization tool library on the Web (difficult to get started)
• ECharts.js An open source Javascript data visualization library produced by Baidu
• Highcharts.js Foreign front-end data visualization library, non-commercial and free, used by many large foreign companies
• AntV Ant Financial's new generation of data visualization solutions, etc.
• Highcharts and Echarts are like the relationship between Office and WPS

ECharts, an open source visualization library implemented using JavaScript, can run smoothly on PCs and mobile devices, compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), and relies on vector graphics at the bottom The library ZRender provides intuitive, interactive and highly customizable data visualization charts.

Vernacular:

• is a JS plugin
• Good performance can run smoothly on PC and mobile devices
• Compatible with major browsers
• Many commonly used charts are provided and can be customized .
  • Line chart , bar chart , scatter chart , pie chart , candlestick chart

Official website address: https://www.echartsjs.com/zh/index.html

10-Echarts-Experience

Official tutorial: [Get started with ECharts in five minutes](https://www.echartsjs.com/zh/tutorial.html#Get started with ECharts in five minutes)

• Download echarts https://github.com/apache/incubator-echarts/tree/4.5.0

Steps for usage:

1. Introduce the echarts plug-in file into the html page
2. Prepare a DOM container with size

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

3. Initialize echarts instance object

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

4. Specify configuration items and data (option)

var option = {
    
    
    xAxis: {
    
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    
    
        type: 'value'
    },
    series: [{
    
    
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

5. Set the configuration item to the echarts instance object

myChart.setOption(option);

11-Echarts-basic configuration

This is to require students to know the main function of each module in the following configuration.

The main configuration that needs to be understood:series xAxis yAxis grid tooltip title legend color

• series

  • series list. Each series typedetermines
  • Vernacular: icon data, specify what type of icon, multiple charts can overlap.

• xAxis: the x-axis in the rectangular coordinate system grid

  • boundaryGap: The blanking strategy on both sides of the coordinate axis is true. At this time, the scale is only used as a dividing line, and the labels and data points will be in the middle of the band between the two scales.

• yAxis: the y-axis in the rectangular coordinate system grid

• grid: The drawing grid in the Cartesian coordinate system.

• title: title component

• tooltip: prompt box component

• legend: legend component

• color: palette color list

  stackData stacking, after the series on the same category axis are configured with the same value, the value of the next series will be added to the value of the previous series.

option = {
    
    
    // color设置我们线条的颜色 注意后面是个数组
    color: ['pink', 'red', 'green', 'skyblue'],
    // 设置图表的标题
    title: {
    
    
        text: '折线图堆叠123'
    },
    // 图表的提示框组件 
    tooltip: {
    
    
        // 触发方式
        trigger: 'axis'
    },
    // 图例组件
    legend: {
    
    
       // series里面有了 name值则 legend里面的data可以删掉
    },
    // 网格配置  grid可以控制线形图 柱状图 图表大小
    grid: {
    
    
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否显示刻度标签 如果是true 就显示 否则反之
        containLabel: true
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
    
    
        feature: {
    
    
            saveAsImage: {
    
    }
        }
    },
    // 设置x轴的相关配置
    xAxis: {
    
    
        type: 'category',
        // 是否让我们的线条和坐标轴有缝隙
        boundaryGap: false,
        data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
     // 设置y轴的相关配置
    yAxis: {
    
    
        type: 'value'
    },
    // 系列图表配置 它决定着显示那种类型的图表
    series: [
        {
    
    
            name: '邮件营销',
            type: 'line',
           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
    
    
            name: '联盟广告',
            type: 'line',

            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
    
    
            name: '视频广告',
            type: 'line',
          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
    
    
            name: '直接访问',
            type: 'line',
          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};

12- Histogram chart (two steps)

• Find similar examples on the official website, analyze them properly, and introduce them into HTML pages
• Customize the chart according to your needs

1. Introduced into the html page

// 柱状图1模块
(function() {
    
    
  // 实例化对象
  let myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  let option = {
    
    
    color: ["#3398DB"],
    tooltip: {
    
    
      trigger: "axis",
      axisPointer: {
    
    
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
    
    
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
    
    
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
    
    
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
    
    
        type: "value"
      }
    ],
    series: [
      {
    
    
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

  // 把配置给实例对象
  myChart.setOption(option);
})();

2. Customized according to needs

   • Modify the column color of the chart #2f89cf

   • Modify the chart size top to 10px bottom to 4% grid to determine the size of our histogram

color: ["#2f89cf"],
grid: {
  left: "0%",
  top: "10px",
  right: "0%",
  bottom: "4%",
  containLabel: true
},

• X-axis related settings xAxis
  • The text color is set to rgba(255,255,255,.6) and the font size is 12px
  • The style of the X-axis is not displayed

// 设置x轴标签文字样式
// x轴的文字颜色和大小
     axisLabel: {
       color: "rgba(255,255,255,.6)",
       fontSize: "12"
     },
//  x轴样式不显示
axisLine: {
    show: false
    // 如果想要设置单独的线条样式 
    // lineStyle: {
    //    color: "rgba(255,255,255,.1)",
    //    width: 1,
    //    type: "solid"
   }
}

• Y-axis relative customization
  • The text color is set to rgba(255,255,255,.6) and the font size is 12px
  • Y axis line style changed to a 1 pixel rgba(255,255,255,.1) border
  • The color of the dividing line is modified to 1 pixel rgba(255,255,255,.1)

// y 轴文字标签样式
axisLabel: {
   color: "rgba(255,255,255,.6)",
    fontSize: "12"
},
// y轴线条样式
axisLine: {
   lineStyle: {
      color: "rgba(255,255,255,.1)",
      // width: 1,
      // type: "solid"
   }
5232},
// y 轴分隔线样式
splitLine: {
 lineStyle: {
    color: "rgba(255,255,255,.1)"
  }
}

• Modify the column shape to be rounded and set in the column width series

series: [
   {
     name: "直接访问",
     type: "bar",
     // 修改柱子宽度
     barWidth: "35%",
     data: [10, 52, 200, 334, 390, 330, 220],
     itemStyle: {
       // 修改柱子圆角
       barBorderRadius: 5
     }
   }
 ]
};

• Replace corresponding data

// x轴中更换data数据
data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
// series 更换数据
data: [200, 300, 300, 900, 1500, 1200, 600]

• Make the chart adapt to the screen

  window.addEventListener("resize", function() {
    
    
    myChart.resize();
  });

13-Histogram 2 customization

• Find similar examples on the official website, analyze them properly, and introduce them into HTML pages
• Customize the chart according to your needs

Requirement 1: Modify the graphic size grid

  // 图标位置
    grid: {
    
    
      top: "10%",
      left: "22%",
      bottom: "10%"
    },

Requirement 2: Do not display the x-axis

   xAxis: {
    
    
      show: false
    },

Requirement 3: y-axis related customization

• Do not display the y-axis and associated ticks

//不显示y轴线条
axisLine: {
    
    
    show: false
        },
// 不显示刻度
axisTick: {
    
    
   show: false
},

• The color of the y-axis text is set to white

   axisLabel: {
    
    
          color: "#fff"
   },

Requirement 4: Modify the first group of column-related styles (bars)

name: "条",
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 柱子设为圆角
itemStyle: {
    
    
    normal: {
    
    
      barBorderRadius: 20,       
    }
},

• Set the percentage display data in the first group of columns

// 图形上的文本标签
label: {
    
    
    normal: {
    
    
         show: true,
         // 图形内显示
         position: "inside",
         // 文字的显示格式
         formatter: "{c}%"
     }
},

• Set the first group of columns to different colors

// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
  itemStyle: {
    
    
          normal: {
    
    
            barBorderRadius: 20,  
            color: function(params){
    
    
            	// params 传进来的是柱子对象
            	console.log(params);
             	// dataIndex 是当前柱子的索引号
            	return myColor[params.dataIndex];
            }
           
          }
         
},

Requirement 5: Modify the related configuration of the second group of columns (frame shape)

  	    name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        itemStyle: {
    
    
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
        },
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }

Requirement 6: Add a second set of data to the y-axis

yAxis: [
      {
    
    
      type: "category",
      data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
      // 不显示y轴的线
      axisLine: {
    
    
        show: false
      },
      // 不显示刻度
      axisTick: {
    
    
        show: false
      },
      // 把刻度标签里面的文字颜色设置为白色
      axisLabel: {
    
    
        color: "#fff"
      }
    },
      {
    
    
        show: true,
        data: [702, 350, 610, 793, 664],
           // 不显示y轴的线
      axisLine: {
    
    
        show: false
      },
      // 不显示刻度
      axisTick: {
    
    
        show: false
      },
        axisLabel: {
    
    
          textStyle: {
    
    
            fontSize: 12,
            color: "#fff"
          }
        }
      }
    ],

Requirement 7: Set up two sets of column stacking and replace data

// 给series  第一个对象里面的 添加 
yAxisIndex: 0,
// 给series  第二个对象里面的 添加 
yAxisIndex: 1,
// series 第一个对象里面的data
data: [70, 34, 60, 78, 69],
// series 第二个对象里面的data
data: [100, 100, 100, 100, 100],
// y轴更换第一个对象更换data数据
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// y轴更换第二个对象更换data数据
data:[702, 350, 610, 793, 664],

Full code:

// 柱状图2
(function() {
    
    
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  // 2. 指定配置和数据
  var option = {
    
    
    grid: {
    
    
      top: "10%",
      left: "22%",
      bottom: "10%"
      // containLabel: true
    },
    // 不显示x轴的相关信息
    xAxis: {
    
    
      show: false
    },
    yAxis: [
      {
    
    
        type: "category",
        inverse: true,
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        // 不显示y轴的线
        axisLine: {
    
    
          show: false
        },
        // 不显示刻度
        axisTick: {
    
    
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
    
    
          color: "#fff"
        }
      },
      {
    
    
        data: [702, 350, 610, 793, 664],
        inverse: true,
        // 不显示y轴的线
        axisLine: {
    
    
          show: false
        },
        // 不显示刻度
        axisTick: {
    
    
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
    
    
          color: "#fff"
        }
      }
    ],
    series: [
      {
    
    
        name: "条",
        type: "bar",
        data: [70, 34, 60, 78, 69],
        yAxisIndex: 0,
        // 修改第一组柱子的圆角
        itemStyle: {
    
    
          barBorderRadius: 20,
          // 此时的color 可以修改柱子的颜色
          color: function(params) {
    
    
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 10,
        // 显示柱子内的文字
        label: {
    
    
          show: true,
          position: "inside",
          // {c} 会自动的解析为 数据  data里面的数据
          formatter: "{c}%"
        }
      },
      {
    
    
        name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        itemStyle: {
    
    
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15
        }
      }
    ]
  };

  // 3. 把配置给实例对象
  myChart.setOption(option);
})();

14- Line Chart 1 Creation of Personnel Change Module

• Find similar examples on the official website, analyze them properly, and introduce them into HTML pages
• Customize the chart according to your needs

Requirement 1: Modify the size of the line chart, set the color of the display border: #012f4a, and display the scale label.

    // 设置网格样式
    grid: {
    
     
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },

Requirement 2: Modify the text color #4c9bfd in the legend component, and the distance from right to the right is 10%

 // 图例组件
    legend: {
    
    
      textStyle: {
    
    
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%' // 距离右边10%
    },

Requirement 3: x-axis related configuration

• Scale removal
• X-axis scale label font color: #4c9bfd
• Eliminate the color of the x-axis axis (use the Y-axis dividing line in the future)
• The two ends of the axis do not need the inner spacing boundaryGap

    xAxis: {
    
    
      type: 'category',
      data: ["周一", "周二"],
	  axisTick: {
    
    
         show: false // 去除刻度线
       },
       axisLabel: {
    
    
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
    
    
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },

Requirement 4: Customization of the y-axis

• Scale removal
• Font color: #4c9bfd
• Divider color: #012f4a

    yAxis: {
    
    
      type: 'value',
      axisTick: {
    
    
        show: false  // 去除刻度
      },
      axisLabel: {
    
    
        color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
    
    
        lineStyle: {
    
    
          color: '#012f4a' // 分割线颜色
        }
      }
    },

Requirement 5: Customization of two line graphs

• Colors respectively: #00f2f1 #ed3f35
• Modify the polyline as smooth and add smooth to true in the series data

    color: ['#00f2f1', '#ed3f35'],
	series: [{
    
    
      name:'新增粉丝',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // 折线修饰为圆滑
      smooth: true,
      },{
    
    
      name:'新增游客',
      data: [100, 331, 200, 123, 233, 543, 400],
      type: 'line',
      smooth: true,
    }]

Requirement 6: Configuration data

// x轴的文字
xAxis: {
    
    
  type: 'category',
  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

// 图标数据
    series: [{
    
    
      name:'新增粉丝',
      data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: 'line',
      smooth: true
    },{
    
    
      name:'新增游客',
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
      type: 'line',
      smooth: true
      }
    }]

Requirement 7: New requirements click on the data changes in 2020 and 2021

The following is the data sent from the background (requested by ajax)

 var yearData = [
      {
    
    
        year: '2020',  // 年份
        data: [  // 两个数组是因为有两条线
             [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
             [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
      },
      {
    
    
        year: '2021',  // 年份
        data: [  // 两个数组是因为有两条线
             [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
     		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
      }
     ];

• tab bar switch event
• Click the 2020 button to replace the data in the first object of the series with data[0] in the 2020 object
• Click the 2020 button to replace the data in the second object of the series with the data in the 2020 object[1]
• The same goes for the 2021 button

Full code:

// 折线图1模块制作
(function() {
    
    
  var yearData = [
    {
    
    
      year: "2020", // 年份
      data: [
        // 两个数组是因为有两条线
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ]
    },
    {
    
    
      year: "2021", // 年份
      data: [
        // 两个数组是因为有两条线
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      ]
    }
  ];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line .chart"));
  // 2.指定配置
  var option = {
    
    
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
    
    
      trigger: "axis"
    },
    legend: {
    
    
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
    
    
        color: "#4c9bfd"
      },
      // 这个10% 必须加引号
      right: "10%"
    },
    grid: {
    
    
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
    
    
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      axisTick: {
    
    
        show: false // 去除刻度线
      },
      axisLabel: {
    
    
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
    
    
        show: false // 去除轴线
      }
    },
    yAxis: {
    
    
      type: "value",
      axisTick: {
    
    
        show: false // 去除刻度线
      },
      axisLabel: {
    
    
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
    
    
        show: false // 去除轴线
      },
      splitLine: {
    
    
        lineStyle: {
    
    
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
    
    
        name: "新增粉丝",
        type: "line",
        // true 可以让我们的折线显示带有弧度
        smooth: true,
        data: yearData[0].data[0]
      },
      {
    
    
        name: "新增游客",
        type: "line",
        smooth: true,
        data: yearData[0].data[1]
      }
    ]
  };

  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    
    
    myChart.resize();
  });

  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
    
    
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();

15- Line Chart 2 Play volume module production

• Find similar examples on the official website, analyze them properly, and introduce them into HTML pages
• Customize the chart according to your needs

Requirement 1: Change the text color of the legend component rgba(255,255,255,.5) and the text size is 12

 legend: {
    
    
      top: "0%",
      textStyle: {
    
    
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
},

Requirement 2: Modify the chart size

grid: {
    
    
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },

Requirement 3: Modify the x-axis related configuration

• Modify the text color to rgba(255,255,255,.6) and the text size to 12
• The color of the x-axis is rgba(255,255,255,.2)

     // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
     axisLabel: {
    
    
          textStyle: {
    
    
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
         // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
    
    
          lineStyle: {
    
    
            color: "rgba(255,255,255,.2)"
          }
        },

Requirement 4: Modify the relevant configuration of the y-axis

        axisTick: {
    
     show: false },
        axisLine: {
    
    
          lineStyle: {
    
    
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
    
    
          textStyle: {
    
    
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
	   // 修改分割线的颜色
        splitLine: {
    
    
          lineStyle: {
    
    
            color: "rgba(255,255,255,.1)"
          }
        }
      

Requirement 5: Modify the configuration of two line modules (note that it is customized in the series)

       //第一条 线是圆滑
       smooth: true,
        // 单独修改线的样式
        lineStyle: {
    
    
            color: "#0184d5",
            width: 2 
        },
         // 填充区域
        areaStyle: {
    
    
              // 渐变色，只需要复制即可
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
    
    
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                },
                {
    
    
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
       itemStyle: {
    
    
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,

       name: "转发量",
        type: "line",
        smooth: true,
        lineStyle: {
    
    
          normal: {
    
    
            color: "#00d887",
            width: 2
          }
         },
         areaStyle: {
    
    
          normal: {
    
    
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
    
    
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
    
    
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 5,
        // 设置拐点颜色以及边框
         itemStyle: {
    
    
            color: "#00d887",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,

Requirement 6: Replace data

// x轴更换数据
data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
// series  第一个对象data数据
 data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
// series  第二个对象data数据
 data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],

16-Pie Chart 1 Age Distribution Module Production

• Find similar examples on the official website, analyze them properly, and introduce them into HTML pages
• Customize the chart according to your needs

Custom Chart Requirement 1:

• Modify the legend component to be displayed at the bottom and centered.
• The width and height of each small icon are modified to 10px
• text size is 12 color rgba(255,255,255,.5)

 legend: {
    
    
      // 距离底部为0%
      bottom: "0%",
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      // 修改图例组件的文字为 12px
      textStyle: {
    
    
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
 },

Customization requirement 2:

• Modify horizontal center and vertical center
• Modify the radius of the inner circle and the radius of the outer circle to ["40%", "60%"] Pink teacher's friendly reminder, with a Cartesian coordinate system such as a histogram of a line chart is a grid to modify the size of the graph, and our pie chart is through radius resize

series: [
      {
    
    
        name: "年龄分布",
        type: "pie",
        // 设置饼形图在容器中的位置
        center: ["50%", "50%"],
        //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
        radius: ["40%", "60%"],
        // 不显示标签文字
        label: {
    
     show: false },
        // 不显示连接线
        labelLine: {
    
     show: false },
      }
    ]

Customization requirement 3: replace data

// legend 中的data  可省略
data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
//  series 中的数据
 data: [
          {
    
     value: 1, name: "0岁以下" },
          {
    
     value: 4, name: "20-29岁" },
          {
    
     value: 2, name: "30-39岁" },
          {
    
     value: 2, name: "40-49岁" },
          {
    
     value: 1, name: "50岁以上" }
 ] ,

Customization requirement 4: change color

color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
        ],

 // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    
    
    myChart.resize();
  });

17-Pie Chart 2 Regional Distribution Module Production (Nightingale Rose Chart)

• Find similar examples on the official website, analyze them properly, and introduce them into HTML pages
• Customize the chart according to your needs

Step 2: Customize as needed

• Requirement 1: Color Settings

color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

• Requirement 2: Modify the size of the pie chart (series object)

radius: ['10%', '70%'],

• Requirement 3: Change the display mode of the pie chart to radius mode

 roseType: "radius",

• Requirement 4: Data usage replacement (data object in series object)

          {
    
     value: 20, name: '云南' },
          {
    
     value: 26, name: '北京' },
          {
    
     value: 24, name: '山东' },
          {
    
     value: 25, name: '河北' },
          {
    
     value: 20, name: '江苏' },
          {
    
     value: 25, name: '浙江' },
          {
    
     value: 30, name: '四川' },
          {
    
     value: 42, name: '湖北' }

• Requirement 5: The font is slightly smaller by 10 px (set in the series object)

  The text label on the pie chart graph can control some styles of the text of the pie chart. label object settings

series: [
      {
    
    
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "radius",
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
    
    
          fontSize: 10
        },
      }
    ]
  };

• Requirement 6: Prevent the guide line from being too long when zooming. The guide line is slightly shorter (set by the labelLine object in the series object)
  • Connection diagram 6 px
  • link text 8 px

+        // 文字调整
+        label:{
+          fontSize: 10
+        },
+        // 引导线调整
+        labelLine: {
+          // 连接扇形图线长
+          length: 6,
+          // 连接文字线长
+          length2: 8
+        } 
+      }
+    ],

• Requirement 6: When the browser is zoomed, the chart will automatically adapt.

// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function() {
    
    
    myChart.resize();
  });

18-Echarts-Community Introduction

The community is a place where active echart users communicate and contribute customized charts.

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-MdeMBSFh-1681441883097)(docs/media/1576664444951.png)]

• Here you can find some highly customized charts based on echart, which are equivalent to plug-ins developed based on jquery. Here are third-party charts developed based on echarts.

19-Echarts-map use (extension)

Refer to the example of the community: https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (simulated aircraft route)

Implementation steps:

• First, you need to download the js file of china.js to provide the map of China
• The second is because there are more codes in it, we create a new js file myMap.js to import
• Just use the configuration provided by the community.

Need to modify:

• Remove the title component
• remove background color
• Modify the map province background #142957 areaColor to make modifications
• The map can be enlarged by setting the zoom to 1.2

    geo: {
    
    
      map: 'china',
      zoom: 1.2,
      label: {
    
    
        emphasis: {
    
    
          show: false
        }
      },
      roam: false,
      itemStyle: {
    
    
        normal: {
    
    
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
    
    
          areaColor: '#0b1c2d'
        }
      }
    },

Summary: This example is an extended case. You can read more cases in the community in the future.

20- Final Constraint Scaling

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
    
    
  html {
    
    
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
    
    
  html {
    
    
    font-size: 80px !important;
  }
}