echarts用法

Posted 世界,太精彩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 {
    width: 400px;
    height: 400px;
  }
</style>

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

 

以上是关于echarts用法的主要内容,如果未能解决你的问题,请参考以下文章

echart的tooltip formatter的用法

echarts的dataZoom详解及用法

Echarts基本图表的学习笔记

Vue中echarts的基本用法

echarts图表markLine的用法与设置多条不同颜色markLine

SQL Select 语句的用法