ECharts data visualization project

Introduction to visualization panel

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

01-Use technology

Completing this project requires knowledge of:

• div + css layout
• flex layout
• Less
• Use native js + jquery
• rem adaptation
• echarts basics

02- Case adaptation solution

• The design draft is 1920px

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

  2. The baseline value of the cssrem plug-in is 80px

     Plug-in-Configuration button-Configure extension settings-Root Font Size settings.

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

03-Basic settings

• body sets the background image, zoom to 100%, line height 1.15
• css initialization

04-header layout

• Height is 100px
• Background image, displayed within the container
• The zoom ratio is 100%
• h1 title part white 38 pixels centered display line height 80 pixels
• The time module showTime positions the right side to 30px, the line height to 75px, the text color to: rgba(255, 255, 255, 0.7) and the text size to 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

• Requires a 10px padding on the top and left

• column column container, divided into three columns, accounting for 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
• There is line.jpg background picture
• The padding is 0 at the top, 15px at the left and right, and 40px at the bottom.
• The bottom margin is 15px
• Use the panel box before and after to make the upper two corners 10px and the line 2px solid #02a6b5
• Add a new box before and after and make the width and height of the lower two corners 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-Bar module (layout)

• Title 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-Middle layout

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

1. The digital module no has a background color rgba (101, 132, 226, 0.1); and a padding of 15 pixels
2. Note that the middle column has margins of 10px on the left and 15px on the bottom.
3. The no module is divided into upper and lower parts. The upper part is numbers (no-hd) and the lower part is related text descriptions (no-bd).
4. no-hd digital modules have a border of 1px solid rgba(25, 186, 139, 0.17)
5. The no-hd digital module is divided into two small li's. 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 uses after and before to create 2 small corners, the border is 2px solid #02a6b5, the width is 30px and the height is 10px
7. The small vertical line for the first small li after can be 1px wide and the background color is rgba (255, 255, 255, 0.2); the height is 50% and top 25% is enough.
8. There are also two small li's 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 margin 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. It contains 4 box charts. The sphere box containing the chart module rotates 1 and rotates 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 100% and positioned to the center of transparency.3
3. Rotate 1 map 2. The size is 643px. You need to add a background image because it needs to be scaled 100%. Position it to the center for transparency. 6. Use z-index to hold down the sphere for rotation animation.
4. Rotation 2 map3 size is 566px. You need to add a background image because it needs to be scaled 100%. Position the center rotation animation. Note that it 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)
• ECharts.js is an open source Javascript data visualization library produced by Baidu.
• Highcharts.js is a foreign front-end data visualization library, free for non-commercial use and used by many large foreign companies.
• AntV Ant Financial’s new generation data visualization solution and more
• Highcharts and Echarts are like the relationship between Office and WPS

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

Vernacular:

• Is a JS plug-in
• Good performance and 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 , K-line 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 a certain 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 configuration items to echarts instance object

myChart.setOption(option);

11-Echarts-Basic configuration

This requires students to know the main function of each module in the following configurations.

Main configurations you need to know:series xAxis yAxis grid tooltip title legend color

• series

  • Series list. Each series typedetermines its own chart type by
  • In plain English: icon data, specifying what type of icon, multiple charts can overlap.

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

  • boundaryGap: The white space 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: y-axis in the rectangular coordinate system grid

• grid: Drawing grid in Cartesian coordinate system.

• title: title component

• tooltip: prompt box component

• legend: legend component

• color: palette color list

  stackData stacking, after a series on the same category axis is 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- Bar chart (two steps)

• Find similar examples on the official website, analyze them appropriately, and introduce them into the HTML page
• Customize charts according to your needs

1. Introduced into 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 chart column color #2f89cf

   • Modify the chart size top to 10px and bottom to 4%. Grid determines the size of our histogram.

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

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

// Set the x-axis label text style
// The text color and size of the x-axis

axisLabel: {
    
    
  color: "rgba(255,255,255,.6)",
  fontSize: "12"
},

// x-axis style is not displayed

   axisLine: {
    
    
       show: false
       // 如果想要设置单独的线条样式 
       // lineStyle: {
    
    
       //    color: "rgba(255,255,255,.1)",
       //    width: 1,
       //    type: "solid"
      }
   }

• Y-axis related customization
  • The text color is set to rgba(255,255,255,.6) and the font size is 12px
  • Change the Y-axis line style to a 1-pixel rgba(255,255,255,.1) border
  • The color of the divider 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 rounded corners and set the column width in 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-Bar chart 2 customization

• Find similar examples on the official website, analyze them appropriately, and introduce them into the HTML page
• Customize charts according to your needs

Requirement 1: Modify the graphic size grid

//Icon position

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 y-axis and related scales

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

• Set the color of the y-axis text to white

   axisLabel: {
    
    
          color: "#fff"
   },

Requirement 4: Modify the related styles of the first group of columns (strips)

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 a different color

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

Requirement 5: Modify the related configuration of the second group of pillars (box 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 stacks 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],

Complete 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 Production of personnel change module

• Find similar examples on the official website, analyze them appropriately, and introduce them into the HTML page
• Customize charts according to your needs

Requirement 1: Modify the size of the line chart, display the border setting color: #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 set the right distance to 10%

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

Requirement 3: x-axis related configuration

• scale removal
• x-axis tick label font color: #4c9bfd
• Eliminate the color of the x-coordinate axis (use the Y-axis dividing line in the future)
• There is no need for internal spacing boundaryGap at both ends of the axis.

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

Requirement 4: Customization of y-axis

• scale removal
• Font color: #4c9bfd
• Dividing line color: #012f4a

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

Requirement 5: Customization of two line graphs

• Colors: #00f2f1 #ed3f35
• Modify the polyline to be smooth. 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 demand click on 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 switching event
• Clicking the 2020 button requires changing the data in the first object of the series to data[0] in the 2020 object.
• Clicking the 2020 button requires changing the data in the second object of the series to the data[1] in the 2020 object.
• The same goes for the 2021 button.

Complete 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 View Volume Module Production

• Find similar examples on the official website, analyze them appropriately, and introduce them into the HTML page
• Customize charts according to your needs

Requirement 1: Change the text color of the legend component to rgba(255,255,255,.5) and the text size to 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 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 the 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 appropriately, and introduce them into the HTML page
• Customize charts according to your needs

Custom chart requirements 1:

• Modify the legend component to be displayed at the bottom and centered.
• Change the width and height of each small icon 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 centering and vertical centering
• Modify the radius of the inner circle and the radius of the outer circle to ["40%", "60%"] Pink teacher's friendly reminder, with a rectangular coordinate system such as a line chart and a column chart, modify the graphic size through grid, and our pie chart uses radius Modify size

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 appropriately, and introduce them into the HTML page
• Customize charts according to your needs

Step 2: Customize according to needs

• Requirement 1: Color setting

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 inside 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: Make the font slightly smaller by 10 px (set in the series object)

  The text labels on the pie chart graphic 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 scaling. The guide line is slightly shorter (labelLine object setting in the series object)
  • Connection diagram 6 px
  • Connect 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 can communicate and contribute customized charts.

• 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 usage (extension)

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

Implementation steps:

• First, you need to download china.js to provide the js file of China map.
• Second, because there is a lot of code in it, we create a new js file myMap.js and introduce it.
• Just use the configuration provided by the community.

Need to modify:

• Remove title component
• remove background color
• Modify the map province background #142957 areaColor and make changes in it
• To enlarge the map, just set it to 1.2 via zoom.

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 look at 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;
  }
}