zoukankan      html  css  js  c++  java
  • echarts用法

    参考文档: https://github.com/xlsdg/vue-echarts-v3

    1、下载echarts插件

    $ npm install --save vue-echarts-v3

    2、引入echarts

      2.1 全部引入     

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

      2.2 部分引入

    import Vue from 'vue';
    import IEcharts from 'vue-echarts-v3/src/lite.vue';
    
    // import 'echarts/lib/chart/line';
    import 'echarts/lib/chart/bar';
    // import 'echarts/lib/chart/pie';
    // import 'echarts/lib/chart/scatter';
    // import 'echarts/lib/chart/radar';
    
    // import 'echarts/lib/chart/map';
    // import 'echarts/lib/chart/treemap';
    // import 'echarts/lib/chart/graph';
    // import 'echarts/lib/chart/gauge';
    // import 'echarts/lib/chart/funnel';
    // import 'echarts/lib/chart/parallel';
    // import 'echarts/lib/chart/sankey';
    // import 'echarts/lib/chart/boxplot';
    // import 'echarts/lib/chart/candlestick';
    // import 'echarts/lib/chart/effectScatter';
    // import 'echarts/lib/chart/lines';
    // import 'echarts/lib/chart/heatmap';
    
    // import 'echarts/lib/component/graphic';
    // import 'echarts/lib/component/grid';
    // import 'echarts/lib/component/legend';
    // import 'echarts/lib/component/tooltip';
    // import 'echarts/lib/component/polar';
    // import 'echarts/lib/component/geo';
    // import 'echarts/lib/component/parallel';
    // import 'echarts/lib/component/singleAxis';
    // import 'echarts/lib/component/brush';
    
    import 'echarts/lib/component/title';
    
    // import 'echarts/lib/component/dataZoom';
    // import 'echarts/lib/component/visualMap';
    
    // import 'echarts/lib/component/markPoint';
    // import 'echarts/lib/component/markLine';
    // import 'echarts/lib/component/markArea';
    
    // import 'echarts/lib/component/timeline';
    // import 'echarts/lib/component/toolbox';
    
    // import 'zrender/lib/vml/vml';

    3、使用echarts

    <template>
      <div class="echarts">
        <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <button @click="doRandom">Random</button>
      </div>
    </template>
    
    <script type="text/babel">
      import IEcharts from 'vue-echarts-v3/src/full.vue';
      export default {
        name: 'view',
        components: {
          IEcharts
        },
        props: {
        },
        data: () => ({
          loading: true,
          bar: {
            title: {
              text: 'ECharts Hello World'
            },
            tooltip: {},
            xAxis: {
              data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
            },
            yAxis: {},
            series: [{
              name: 'Sales',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          }
        }),
        methods: {
          doRandom() {
            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;
          },
          onReady(instance) {
            console.log(instance);
          },
          onClick(event, instance, echarts) {
            console.log(arguments);
          }
        }
      };
    </script>
    
    <style scoped>
      .echarts {
         400px;
        height: 400px;
      }
    </style>

    Learn more ECharts' API   http://echarts.baidu.com/api.html

     

  • 相关阅读:
    在 Linux 下查看硬件配置
    对于 ASP.NET 在 IIS 上的一些高并发处理配置
    处理 目标主机SSH服务存在RC4、CBC或None弱加密算法 的问题
    处理 Windows Server 中 CVE-2016-2183(SSL/TLS) 漏洞的方法
    在 Windows Server 2008 R2下部署 asp.net core 3.1 网站遇到的问题
    在 Windows Server 2012 安装最新版 SSMS 遇到错误 0x80070005 -Acess Denied
    在 CentOS 中安装 7zip
    在 npm run build 时遇到报错 [BABEL] No "exports" main defined in
    【性能项目实战:k8s+微服务】热门测试技术,提升职场竞争力(持续更新中。。。)
    windows下安装skywalking8.6.0(用于本地开发调试代码)
  • 原文地址:https://www.cnblogs.com/cina33blogs/p/7281067.html
Copyright © 2011-2022 走看看