前言

我们在书写echarts组件的时候，往往会发现：

1 方法中设置option

var datamap0 = [];
var datamap1 = [];

var maps = res.data;
var data_A = ['', '', '', '', '', '', '', '', '', '', '', ''];
var data_B = ['', '', '', '', '', '', '', '', '', '', '', ''];

maps.forEach((map, index) => {
  datamap0.push(
          map.时间
  );
  data_A[index] = map.人数
  datamap1.push(
          map.人数
  );
  data_B[index] = map.净增
});

console.log("mapsyear,",datamap1);


var xData = datamap0;
var y1Data = data_A;

var y2Data = data_B;
option = {
  grid: {
    left: "7%",
    right: "5%",
    top: "25%",
    bottom: "19%",
  },

  title: {
    show: true,
    text: "增长统计" || pName,
    left: 'center',

    textStyle: {
      color: "#030303",
    },

  },

  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  legend: {
    data: ["月末","净增"],
    left: "3%",
    top: "10%",
    itemWidth: 11,
    itemHeight: 11,
    textStyle: {
      color: "#100e0e",
      fontSize: 13,
    },
  },
  toolbox: {
    show: false,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: true,
      show: true,
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 13,
        color: "#5b5959",
        margin: 8,
        interval: 0,
        formatter: function (val) {
          return val;
        },
      },
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#4e608b", //左边线的颜色
          width: "1", //坐标线的宽度
        },
      },
      data: xData,
    },
  ],
  yAxis: [
    {

      axisLabel: {
        formatter: "{value}",
        textStyle: {
          fontSize: 12,
          fontFamily: "PingFang SC",
          fontWeight: 400,
          lineHeight: 17,
          color: "#979A9F", //坐标值的具体的颜色
          opacity: 1,
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          width: 2,
          color: ["#E3E3E3"], //分割线的颜色
          // color: ['#5d5d5d'] //分割线的颜色
        },
      },


      type: "value",
      scale: true,
      name: "",
      axisLine: {
        show: true,
      },
      splitNumber: 4,
      axisTick: {
        show: false,
      },
      // splitLine: {
      //   lineStyle: {
      //     // 使用深浅的间隔色
      //     color: "#4e608b",
      //   },
      // },
      // axisLabel: {
      //   fontSize: 13,
      //   color: "#d0d0d0",
      //   margin: 5,
      // },
      max: 10000,
      min: 0,
      boundaryGap: [0.2, 0.2],
    },
    {
      type: "value",
      scale: true,
      axisLine: {
        show: true,
      },
      splitNumber: 3,
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 13,
        color: "#d0d0d0",
        margin: 12,
      },
      splitLine: {
        lineStyle: {
          // 使用深浅的间隔色
          color: "#4e608b",
        },
      },
      name: "",
      max: 300,
      min: -200,
      boundaryGap: [0.2, 0.2],
    },
  ],
  series: [
    {
      name: "月末",
      type: "bar",
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#1dacfe",
          },
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#4889fb", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#15b3ff", // 100% 处的颜色
                    },
                  ],
                  false
          ),
        },
      },
      barWidth: "40%",
      yAxisIndex: 0,
      data: y1Data,
    },
    {
      name: "净增",
      yAxisIndex: 1,
      color: "#f30e0e",
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#f30e0e",
          },
        },
      },
      lineStyle: {
        color: "#f30e0e",
      },
      type: "line",
      data: y2Data,
    },
  ],
};

this.myChart4.setOption(option);

今天分享几段工作生活中常用的代码，都是最为基础的功能和操作，而且大多还都是出现频率比较高的，很多都是可以拿来直接使用或者简单修改就可以放到自己的项目当中

前言说明：因工作需要用到图统计数据作为展示，用到echarts3（你也可以考虑用阿里的AntV:http://antv.alipay.com/zh-cn/index.html,或者国外的一些图形插件）。发现官方文档只有根据属性查询，没有根据图的类型文档说明。以下重点写的例子主要是官方示例中没有提及，但是我工作中用到了的示例。

颜色渐变函数 前四个参数分别表示四个位置依次为 右下左上

// 颜色渐变函数 前四个参数分别表示四个位置依次为
// 右下左上   
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        offset: 0,
        color: '#00E2FF'
    },
    {
        offset: 1,
        color: '#0063BF'
    }
]) 

需求：用户分享红包到微信群中。

首先说标题不是原创，是借用52破解网上一位名叫“创造太阳”网友的文章标题，那篇文章是关于用Python完成给女友发情话的操作。因为我不会Python所以只能把Python换成按键精灵，所以才有了这个标题。《女朋友抱怨不会说情话，用按键精灵给她发了20000句！让她见识见识情话大全！》

虽然看不懂Python的语法，但是这个操作一眼就能知道，基本的原理就是找到一个情话网站，然后从中提取关于情话部分的文字。

1. 前言