echarts主题自定义不成功

[M1YT]

Hi，您好！
请问下能不能给个自定义主题的demo，我这边使用自定义主题不成功，谢谢！

自定义主题导入代码

import 'echarts/theme/xtheme.js'
import IEcharts from 'vue-echarts-v3/src/full.vue'

<IEcharts
          theme="xtheme"
          :option="bar"
          :resizable="true"
></IEcharts>

这边测试没有成功！

[xlsdg]

导入顺序错了，应该是：

import IEcharts from 'vue-echarts-v3/src/full.vue'
import 'echarts/theme/xtheme.js'

<IEcharts
  theme="xtheme"
  :option="bar"
  :resizable="true"
></IEcharts>

[M1YT]

我这边调整了顺序，还是无效，这边应用的应该是默认的echarts样式，换成官方shine等相关主题也是无效

[xlsdg]

官方包里没有 xtheme ：

[xlsdg]

import IEcharts from 'vue-echarts-v3/src/full.vue';
import 'echarts/theme/macarons.js';

<IECharts
  :option="option"
  theme="macarons"
/>

[M1YT]

xtheme.js是我自己导入的一个自定义的主题，我换成macarons也是无效的

[xlsdg]

检查一下代码，我这边 demo 是可以生效的。

[M1YT]

你的echarts及vue版本，还有系统是啥？

[xlsdg]

package.json:

{
  "name": "echarts-demo",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "xLsDg <xlsdg@qq.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-echarts-v3": "^1.0.4",
    "vue-router": "^2.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

[xlsdg]

echarts.vue:

<template>
  <div class="echarts">
    <IEcharts
      :option="line"
      @ready="onReady"
      theme="macarons"
    />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.vue'
  import 'echarts/theme/macarons.js'

  export default {
    name: 'view',
    components: {
      IEcharts
    },
    props: {
    },
    data () {
      const that = this
      return {
        data: [],
        timer: null,
        now: +new Date(1997, 9, 3),
        oneDay: 24 * 3600 * 1000,
        value: Math.random() * 1000,
        line: {
          title: {
            text: '动态数据 + 时间坐标轴'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              params = params[0]
              var date = new Date(params.name)
              return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]
            },
            axisPointer: {
              animation: false
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            }
          },
          series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: that.data
          }]
        }
      }
    },
    methods: {
      onReady (instance) {
        const that = this
        that.chart = instance
      },
      randomData () {
        const that = this
        that.now = new Date(+that.now + that.oneDay)
        that.value = that.value + Math.random() * 21 - 10
        return {
          name: that.now.toString(),
          value: [
            [that.now.getFullYear(), that.now.getMonth() + 1, that.now.getDate()].join('/'),
            Math.round(that.value)
          ]
        }
      }
    },
    beforeMount () {
      const that = this
      for (var i = 0; i < 1000; i++) {
        that.data.push(that.randomData())
      }
    },
    mounted () {
      const that = this
      if (that.timer) {
        clearInterval(that.timer)
        that.timer = null
      }
      that.timer = setInterval(function () {
        for (var i = 0; i < 5; i++) {
          that.data.shift()
          that.data.push(that.randomData())
        }

        that.chart && that.chart.setOption({
          series: [{
            data: that.data
          }]
        })
      }, 1000)
    },
    beforeDestroy () {
      const that = this
      if (that.timer) {
        clearInterval(that.timer)
        that.timer = null
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .echarts {
    width: 400px;
    height: 400px;
  }
</style>

[xlsdg]

默认主题：

macarons 主题：

[M1YT]

我这边直接复制了你的代码，貌似还是不成功

[xlsdg]

所以说要检查你自己的工程代码配置。

[xlsdg]

demo 演示：

第一步：

$ git clone https://github.com/xlsdg/vue-echarts-v3.git vue-echarts

第二步：

修改 vue-echarts/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-echarts-v3</title>
    <style type="text/css">
      .echart {
        width: 600px;
        height: 400px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <button @click="doLoading">Random</button>
      </div>
      <div class="echart" :style="style">
        <i-echarts :option="bar" :loading="loading" :resizable="true" @ready="onReady" @click="onClick" theme="macarons"></i-echarts>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

第三步：

修改 vue-echarts/src/dev.js：

import Vue from 'vue';
import IEcharts from './full.vue';
// import IEcharts from './lite.vue';
// import 'echarts/lib/chart/bar';
// import IEcharts from '../dist/js/full.js';
import 'echarts/theme/macarons.js';

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {
    IEcharts
  },
  data: () => ({
    loading: true,
    style: {},
    bar: {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
  }),
  methods: {
    doLoading() {
      const that = this;
      let data = [];
      for (let i = 0, min = 5, max = 99; i < 6; i++) {
        data.push(Math.floor(Math.random() * (max + 1 - min) + min));
      }
      that.loading = !that.loading;
      that.bar.series[0].data = data;
      that.style = {
        width: Math.floor(Math.random() * (1024 + 1 - 400) + 400) + 'px',
        height: Math.floor(Math.random() * (768 + 1 - 200) + 200) + 'px'
      };
    },
    onReady(ins) {
      console.dir(ins);
    },
    onClick(event, instance, echarts) {
      console.log(arguments);
    }
  }
});

第四步：

$ cd vue-echarts && npm i && npm run start

浏览器访问 http://localhost:8080/，看看是不是这个效果：

[ruanzy]

我的也是这样
报错：
Uncaught Error: Cannot find module "echarts/theme/macarons.js"

[byc1990]

@xlsdg 您好, 我下载了demo, 用官方带的那几个是可以的，但是自定义的就不行， 报错Echarts is not loaded, 把我自定义的放到echarts 源码目录下theme文件夹内是可以的， 请问有没有办法解决？谢谢！

[xlsdg]

@byc1990 把主题单独做成一个 npm 包试试呢？类似这样 https://github.com/xlsdg/nezha-echarts-theme

[byc1990]

@xlsdg 好的， 后面试试，多谢回复！

[WormGirl]

@byc1990 我也是同样的问题 怎么解决

[M1YT]

@WormGirl 我这边上了新版，就可以了

[WormGirl]

@xf0rk 我用的是最新版本，放在自己的util文件夹里就不可以，必须放到nodemoudles里的echarts 的theme里