This is the 21st day of my participation in Gwen Challenge. See more details: Gwen Challenge!

Introduction to 👽

This practice focuses on an attribute and an idea in Echarts development. One attribute is very simple, is the backgroundColor attribute, a way of thinking refers to thinking out of the box, clever collocation at first sight irrelevant attributes to complete the requirements.

👽 Attached: pre-code

<template>
  <div id="app" :style="{ width: '400px', height: '400px' }"></div>
</template>

<script>
import mapJson from './assets/mapJson.json';
export default {
  name: 'App'.mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const echartDom = document.querySelector('#app');
      const echartIns = echarts.init(echartDom);

      echarts.registerMap('map', mapJson);

      // Specify the chart configuration items and data
      const option = {
        series: [{layoutCenter: ['50%'.'50%'].layoutSize: '100%'.type: 'map'.map: 'map'.itemStyle: {
              areaColor: 'RGB (73136251).,},},],}; echartIns.setOption(option); ,}}};</script>
Copy the code

👽 backgroundColor property

The backgroundColor property in echarts is used to add a backgroundColor to a diagram. Adding the color directly is as simple as writing backgoundColor:’#fff22f’ in option.

So the whole background behind the map will turn yellow. What if you want to achieve the effect of the yellow circle with the blue background in the image above?

Some people might say, just add a similar background image. The backgroundColor property does support passing in images in the following format:

backgoundColor:{   
    image: imageDom, // Support HTMLImageElement, HTMLCanvasElement, path string is not supported
    repeat: 'repeat' // Can be 'repeat-x', 'repeat-y', 'no-repeat'
}
Copy the code

The backgroundColor property also supports gradient colors. Radial gradient can easily solve this problem.

  backgroundColor: {
    type: 'radial'.x: 0.5.// Center x is located at 50% of the X-axis
    y: 0.5.// Center y is located at 50% of the Y-axis
    r: 0.5.// Background radius
    colorStops: [{offset: 0.color: '#fff22f'.// The color at 0%
       },
       {
         offset: 0.8.color: '#fff22f'.// Color at 80%
       },
       {
         offset: 0.8.color: 'rgb(35, 93, 204)'.// Color at 80%
       },
       {
         offset: 1.color: 'rgb(35, 93, 204)'.// Color at 100%},].global: false,},Copy the code

👽 Shadow implementation

The image above still looks a little dull, so let’s create a shadow effect. Speaking of shadows, isn’t a shadow just a shadow? Set the attributes associated with the shadow.

        series: [
          {
            layoutCenter: ['50%'.'50%'].layoutSize: '100%'.type: 'map'.map: 'map'.itemStyle: {
              areaColor: 'RGB (73136251)..shadowColor: 'RGB (0,35,86)'.// Shadow color
              shadowBlur: 5.// Shadows blur the distance}},].Copy the code

Aye? Not the way you want it to be. If you look closely, the shadow-related attributes are written inside the itemStyle. This shadow is also used to configure each itemStyle.

The road is blocked. What can WE do? At this point, we need to think out of the box, the realization of the shadow can not only be considered from the shadow itself. Think of it this way: if you have two maps of the same size, wouldn’t a darker one with a slightly misaligned one on the bottom achieve a similar effect?


        geo: {
          layoutCenter: ['52%'.'52%'].// The shadow map position is slightly staggered
          layoutSize: '100%'.map: 'map'.itemStyle: {
            areaColor: 'RGB (0,35,86)'.// The color is darker
            borderColor: 'RGB (0,35,86)'.// Keep the border color consistent with the region color to avoid drama
          },
          silent: true.// Silent processing, do not respond to events such as the mouse, let it safely as a background
        },
        series: [{layoutCenter: ['50%'.'50%'].layoutSize: '100%'.type: 'map'.map: 'map'.itemStyle: {
              areaColor: 'RGB (73136251).,}},],Copy the code

👽 epilogue

Although it is to introduce two points, in fact, are common: we broaden our thinking together!