zoukankan      html  css  js  c++  java
  • 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';
  • 相关阅读:
    【BZOJ】【1833】【ZJOI2010】count 数字计数
    bzoj2588: Spoj 10628. Count on a tree(树上第k大)(主席树)
    NOIP2017金秋冲刺训练营杯联赛模拟大奖赛第一轮Day2题解
    NOIP2017金秋冲刺训练营杯联赛模拟大奖赛第二轮Day2题解
    51nod 1962 区间计数(单调栈+二分)
    51nod 1486 大大走格子(DP+组合数学)
    bzoj2276: [Poi2011]Temperature(单调队列/堆)
    5028: 小Z的加油店(线段树)
    bzoj2216: [Poi2011]Lightning Conductor(分治决策单调性优化)
    bzoj1057: [ZJOI2007]棋盘制作(悬线法)
  • 原文地址:https://www.cnblogs.com/fyjz/p/13639011.html
Copyright © 2011-2022 走看看