在vue中使用echarts的自定义主题

一、安装echarts，npm i echarts -S

二、在main.js里引入echarts主题的js，通常在  node_modules---echarts---theme---macarons.js。  theme里边有各类各样的主题，任意选一种，这里我选的是macarons。引入：import  'echarts/theme/macarons.js'

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

代码示例：

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()
            }
          ]
        });
      });

 

更多：

Vue Element表单绑定（四）经常使用操做整理

Muse-UI +Vue2.0框架开发环境搭建

基于Vue2.0的UI框架整理