Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Echarts visualization should be the front end will be exposed to the common technology, written several times echarts visualization, Echarts visualization has a lot of common configuration, but every time an interval of time to write or forget, and then go to Baidu and turn the official document, the efficiency is relatively low, Now make a note of some of the most used and frequent Settings for later reference.

  1. Add a line of text to the diagram

    var option = { graphic:{ type:'text', left:'75%', top:'12%', z:2, zlevel:100, style:{ text: TextAlign :'center', fill:' RGB (224, 224, 224)', fontSize:'12'}},}Copy the code

  2. The X-axis text is too long

(1) Slant the text

XAxis: {data: [" shirt 11111"," wool 22 "," chiffon shirt 111"," pants 111"],// The data in the X-axis axisLabel: {// The relevant Settings of the scale label on the axis. Rotate :0, rotate:"45"}}, rotate:"45"}}, rotate:"45"}}, rotate:"45"}} 0, formatter:function(value) { return value.split("").join("\n"); }} ` ` `Copy the code

  1. If the label value on the Y-axis of the line chart is too long, the line chart is not fully displayed

    grid: {
        left: 35
    },
Copy the code

  2. The shadow effect when clicked

    tooltip: { trigger: "axis", // formatter: "{c}", axisPointer: { type: "shadow", shadowStyle: { color: "Rgba (103, 219, 255,0.15)"Copy the code

  3. X axis y axis, scale line, axis value

    AxisLine: {show: false},// axis axisTick: {show: false},// calibration line axisLabel: {show: false},// calibration valueCopy the code

  4. The pie chart shows the lines

    LineStyle: {color: "RGB (94, 109, 212)", type: "dashed"}}}, label: {normal: {length: 3, // Change the length of the line lineStyle: {color:" RGB (94, 109, 212)", type: "dashed"}}}, label: {/ / line text normal: {formatter: "{b}, {d} %", textStyle: {color: "# 000"}}},Copy the code

  5. Defines a new array to intercept to display

    var Montedkeys = [];
this.SendtoMontedkeys.forEach(item => {
        Montedkeys.push(item.substring(3, 6));
      });
Copy the code

  6. Map Key-value mapping

    var AreasDistribute = this.allianceArea.proList.map(item => {
        return { name: item._id, value: item.allsum };
      });
Copy the code