How to complete an echarts quickly

When you get a cool echarts prototype, how should you write it quickly? Do you go to the official website one by one to find the configuration items, or go crazy on Baidu, and finally can’t find the same or similar one.
Now Teach you a quick way to complete an echarts.

1. Useful attributes of echarts

1、graphic

原生图形元素组件。可以支持的图形元素包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group
用的比较多的是image图形元素,这个元素可以搞定你一切的背景图,背景图方面你可以不用担心
代码:
    graphic: {
    
    
      elements: [
        // 内部图片
        {
    
    
          type: 'image',
          z: 3,
          style: {
    
    
            image: 'base64图片',
            width: 81,
            height: 81,
          },
          left: 'center',
          top: 'center',
          position: [100, 100],
        },
      ],
    },

2、title

标题组件,包括主标题和副标题
当你需要文字展示时,在series的lable属性里面搞不定时,都可以用这个title属性,他可以随意调整位置,同时也可以自定义富文本样式,比如字体、颜色、边框等
代码:  
    title: {
    
    
      text: '690',
      top: '39%',
      textAlign: 'center',
      left: '48%',
      textStyle: {
    
    
        color: '#d7d57b',
        fontSize: 18,
      },
    },

3、dataZoom

用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响,主要用于柱状图或者折线图,x轴数据过多
代码:

2. Pie chart category

1. Pie chart color

1. Set it in the itemStyle of the series

2. Set it in the itemStyle of data

2. Legend

3. Guiding lines and text

4. Complete example

3. Histogram

1. 3D histogram

2. Horizontally stacked column chart and vertical stacked column chart

4. Line chart

5. Radar chart

1. Center center (center of circle) coordinates

2. radius The radius of the radar chart

3. axisName is the configuration item for the name of each indicator in the radar chart.

おすすめ

転載: blog.csdn.net/weixin_48300785/article/details/123567701