ECharts 常用圖表

Echarts 是一個純 Javascript 的開源可視化圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。

總結(jié)一些常用的圖表：

1. 折線圖

image.png
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: '#57617B',
      },
    },
  },
  legend: {
    data: ['預算金額', '執(zhí)行金額', '開支金額'],
    top: '0',
    textStyle: {
      color: '#fff',
    },
    itemGap: 20,
  },
  grid: {
    left: '0',
    right: '20',
    top: '30',
    bottom: '20',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        show: true,
        color: 'rgba(255,255,255,.6)',
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
        },
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
    {},
  ],
  yAxis: [
    {
      name: '金額',
      axisLabel: {
        show: true,
        color: 'rgba(255,255,255,.6)',
        formatter: function (value) {
          if (value == 0) {
            return '0萬';
          } else {
            return value + '萬';
          }
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
        },
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
        },
      },
    },
  ],
  series: [
    {
      name: '預算金額',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        width: 2,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(24, 163, 64, 0.3)',
            },
            {
              offset: 0.8,
              color: 'rgba(24, 163, 64, 0)',
            },
          ],
          false,
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
      },
      itemStyle: {
        color: '#49bcf7',
        borderColor: 'rgba(137,189,2,0.27)',
        borderWidth: 12,
      },
      data: [20, 82, 11, 14, 10, 12, 10, 25, 15, 12, 16, 22], // executionAmount
    },
    {
      name: '執(zhí)行金額',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        width: 2,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(24, 163, 64, 0.3)',
            },
            {
              offset: 0.8,
              color: 'rgba(24, 163, 64, 0)',
            },
          ],
          false,
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
      },
      itemStyle: {
        color: '#cdba00',
        borderColor: 'rgba(137,189,2,0.27)',
        borderWidth: 12,
      },
      data: [20, 12, 11, 14, 15, 10, 10, 25, 45, 22, 65, 122], // executionAmount
    },
    {
      name: '開支金額',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        width: 2,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(39, 122,206, 0.3)',
            },
            {
              offset: 0.8,
              color: 'rgba(39, 122,206, 0)',
            },
          ],
          false,
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
      },
      itemStyle: {
        color: '#d0648a',
        borderColor: 'rgba(0,136,212,0.2)',
        borderWidth: 12,
      },
      data: [22, 18,  12, 14, 12,19, 14, 15, 10, 11, 15, 12],
    },
  ],
}

// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
window.addEventListener("resize", function () {
  myChart.resize();
});

2. 柱狀圖

image-1.png
option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B",
        },
      },
    },
    legend: {
      data: [{ name: "預算執(zhí)行率" }, { name: "實際執(zhí)行率" }, { name: "賬面開支率" }],
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,0.9)", //圖例文字
      },
    },
    xAxis: [
      {
        type: "category",
        data: ['研發(fā)部', '綜合部', '科研部', '行政部', '教務部', '財會部', '監(jiān)察部', '勞動部', '商務部'],
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          textStyle: { color: "rgba(255,255,255,.6)", fontSize: "14" },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "執(zhí)行率",
        max: 100,
        axisLabel: {
          show: true,
          formatter: "{value} %",
        },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.6)" } }, //左線色
        splitLine: { show: true, lineStyle: { color: "#475877" } },
        data: [0, 20, 40, 60, 80, 100],
      },
    ],
    grid: {
      top: "12%",
      right: "50",
      bottom: "30",
      left: "50",
    },
    series: [
      {
        name: "預算執(zhí)行率",
        type: "bar",
        data: [65.26,54.0,65.2,65.2,89.55,78.25,45.26,65.2,65.2],
        barWidth: "auto",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#49bcf7",
                },

                {
                  offset: 1,
                  color: "#49bcf7",
                },
              ],
              globalCoord: false,
            },
          },
        },
      },
      {
        name: "實際執(zhí)行率",
        type: "bar",
        data: [65.26,54.0,65.2,65.2,89.55,78.25,45.26,65.2,65.2],
        barWidth: "auto",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#cdba00",
                },
                {
                  offset: 1,
                  color: "#cdba00",
                },
              ],
              globalCoord: false,
            },
          },
        },
        barGap: "0",
      },
      {
        name: "賬面開支率",
        type: "bar",
        data: [65.26,54.0,65.2,65.2,89.55,78.25,45.26,65.2,65.2],
        barWidth: "auto",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#d0648a",
                },
                {
                  offset: 1,
                  color: "#d0648a",
                },
              ],
              globalCoord: false,
            },
          },
        },
        barGap: "0",
      },
    ],
  };

  // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
image-3.png
option = {
    tooltip: {
      show: false,
    },
    grid: {
      top: "0%",
      left: "60",
      right: "70",
      bottom: "0%",
    },
    xAxis: {
      min: 0,
      max: 100,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: {
      data: ['研發(fā)部', '綜合部', '科研部', '行政部', '教務部', '財會部', '監(jiān)察部', '勞動部', '商務部'],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: 14,
      },
    },
    series: [
      {
        type: "bar",
        label: {
          show: true,
          zlevel: 10000,
          position: "right",
          padding: 10,
          color: "#49bcf7",
          fontSize: 14,
          formatter: "{c}%",
        },
        itemStyle: {
          color: "#49bcf7",
          barBorderRadius: [60, 60, 60, 60],
        },
        barWidth: "15",
        data: [33.65, 54.0, 65.2, 65.2, 89.55, 78.25, 45.26, 65.2, 65.2],
        z: 10,
      },
      {
        type: "bar",
        barGap: "-100%",
        itemStyle: {
          color: "#fff",
          opacity: 0.1,
          barBorderRadius: [60, 60, 60, 60],
        },
        barWidth: "15",
        data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
        z: 5,
      },
    ],
  };
  // 百分比顯示在最右邊
  setTimeout(function () {
    var width = myChart.getWidth();
    var opt = myChart.getOption();
    var grid = opt.grid[0];
    var right = grid.right;
    var left = grid.left;

    var x = width - left - right;

    myChart.setOption({
      series: [
        {
          label: {
            show: true,
            position: "left",
            offset: [x + 80, 0],
          },
        },
      ],
    });
  });
  // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });

3. 餅圖

image-2.png
option = {
    tooltip: {
      trigger: "item",
      formatter: " : {c} (u0z1t8os%)",
    },
    legend: {
      right: 0,
      top: 30,
      itemHeight: 10,
      itemGap: 10,
      orient: "vertical",
      selectedMode: false, //取消圖例上的點擊事件
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12,
      },
      data: ['研發(fā)部', '綜合部', '科研部', '行政部', '教務部', '財會部', '監(jiān)察部', '勞動部', '商務部'],
    },
    series: [
      {
        name: " ",
        color: ["#62c98d", "#2f89cf", "#4cb9cf", "#53b666", "#62c98d", "#205acf", "#c9c862", "#c98b62", "#c962b9", "#7562c9", "#c96262", "#c25775", "#00b7be"],
        type: "pie",
        radius: [40, 70],
        center: ["35%", "52%"],
        avoidLabelOverlap: true,
        animation: false,
        hoverAnimation: false,
        label: {
          show: false,
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
          },
        },

        lableLine: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
          },
        },
        data: [
          {"name": "研發(fā)部","value": "1040000.00"},
          {"name": "科研部", "value": "40000.00"},
          {"name": "綜合部","value": "30000.00"},
          {"name": "行政部","value": "30000.00"},
          {"name": "教務部","value": "30000.00"},
          {"name": "財會部","value": "30000.00"},
          {"name": "勞動部","value": "30000.00"},
          {"name": "商務部","value": "20000.00"},
          {"name": "監(jiān)察部","value": "10000.00"}
        ]
      },
    ],
  };

  // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });

儀表盤
一個圓圈表示100%，男生消費和女生消費的占比。


image-4.png
  var v1 = 65 //女消費
  var v2 = 35 //男消費
  var v3 = 100 //總預算
  option = {
    //animation: false,
    series: [
      {
        type: "pie",
        radius: ["60%", "70%"],
        color: "#cdba00",
        label: {
          normal: {
            position: "center",
          },
        },
        data: [
          {
            value: v1,
            name: "男消費",
            label: {
              normal: {
                formatter: v1 + "",
                textStyle: {
                  fontSize: 20,
                  color: "#fff",
                },
              },
            },
          },
          {
            value: v2,
            name: "女消費",
            label: {
              normal: {
                formatter: function (params) {
                  return "占比" + 1 + "%";
                },
                textStyle: {
                  color: "#aaa",
                  fontSize: 12,
                },
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(255,255,255,.2)",
              },
              emphasis: {
                color: "#fff",
              },
            },
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });

以上就是今天所有的echarts的內(nèi)容，希望對大家有所幫助。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容