在vue中使用echarts的自定義主題

時間 2019-11-05

標籤 vue 使用 echarts 自定義主題简体版

原文原文鏈接

一、安裝echarts，npm i echarts -Sjavascript

二、在main.js裏引入echarts主題的js，通常在 node_modules---echarts---theme---macarons.js。 theme裏邊有各類各樣的主題，任意選一種，這裏我選的是macarons。引入：import 'echarts/theme/macarons.js'java

三、在echarts初始化時，使用主題。let myChart01 = this.$echarts.init(document.getElementById('myChart01'),'macarons');
node

代碼示例：npm

import echarts from "echarts";
import  'echarts/theme/macarons.js'

// 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById("School"),'macarons');
        // 繪製圖表
        myChart.setOption({
          title: {
            text: "學校申請人數Top10",
            subtext: "數據來自Crm系統"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: "category",
            data: data.name.reverse()
          },
          series: [
            {
              name: "申請人數",
              type: "bar",
              data: data.value.reverse()
            }
          ]
        });
      });