echart在vue中使用

package.json

"dependencies": {
    "echarts-liquidfill": "^2.0.4",
    "echarts-wordcloud": "^1.1.3",
    "element-ui": "^2.5.2",
    "normalize.css": "^8.0.0",
    "qs": "^6.5.2",
    "view-design": "^4.3.2",
    "vue": "2.5.2",
    "vue-echarts": "^3.1.3",
    "vue-grid-layout": "^2.3.8",
    "vue-json-tree-view": "^2.1.4",
    "vue-router": "^3.0.1",
    "vuedraggable": "^2.23.0",
    "vuex": "^3.0.1"
  },

在main.js中（按需引入），水球图和标签云需要单独引入

//Echarts
import $Echarts from 'echarts/lib/echarts';  //引入基本echarts
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/radar';
import 'echarts/lib/chart/tree';
import 'echarts/lib/chart/graph';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/sunburst';
import 'echarts/lib/chart/heatmap';
import 'echarts/lib/chart/treemap';
import 'echarts/lib/chart/scatter';
// echarts component - 按需引入，需要引入需要的组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/graphic';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/legend/scrollableLegendAction';
import 'echarts/lib/component/legend/ScrollableLegendModel';
import 'echarts/lib/component/legend/ScrollableLegendView';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/component/calendar';

//echarts 不同的风格背景json - 这里的json是自己在官网上下载的
import ECharts from 'vue-echarts/components/Echarts.vue';
import theme from '../src/assets/theme/theme.json';
import themedark from '../src/assets/theme/themedark.json';
import themechalk from '../src/assets/theme/themechalk.json';
import thememacarons from '../src/assets/theme/thememacarons.json';
import themewesterost from '../src/assets/theme/themewesteros.json';
//标签云和水球插件
import 'echarts-wordcloud';
import 'echarts-liquidfill';
//更换主题
ECharts.registerTheme('lighttheme', theme);
ECharts.registerTheme('darktheme', themedark);
ECharts.registerTheme('chalktheme', themechalk);
ECharts.registerTheme('macaronstheme', thememacarons);
ECharts.registerTheme('westerostheme', themewesterost);
Vue.component('echarts', ECharts);
Vue.prototype.theme = 'macaronstheme';