ECharts的使用

背景

最近公司有做数据面板的需求，后台前端用的是Vue+Element，选用强大的Apache ECharts。

Apache ECharts 官网

官网 https://echarts.apache.org/zh/index.html

导入依赖

TypeScript 版本

npm install echarts --save

npm install @types/echarts

JavaScript版本

npm install echarts --save

页面代码

单折线

<template>
    <div class="app-container">
        <div id="main" 	style="width:800px;height:400px;"></div>
    </div>
</template>

<script>
//<script lang="ts">
  import {Component,Vue} from "vue-property-decorator";

  @Component
  export default class extends Vue {
    private drawChart() {
      // 基于准备好的dom，初始化echarts实例
      const echarts = require("echarts");
      const myChart = echarts.init(document.getElementById('main') as HTMLDivElement);
      myChart.setOption({
        title: {
          text: "图表标题"
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "line",
            data: []
          }
        ]
      });
    }

    mounted() {
      this.drawChart();
    }
  }
</script>

双折线、双Y轴

<template>
    <div class="app-container">
		<div id="chartId" style="width:100%;height:500px;"></div>
	</div>
</template>

<script>
//<script lang="ts">
import {Component,Vue} from "vue-property-decorator";

  @Component({
    components: {}
  })
  export default class extends Vue {

      private drawChart() {
      	   // 基于准备好的dom，初始化echarts实例
          const echarts = require("echarts");
          //清除原本的图表信息(当多个图表时切换时会用到)
          document.getElementById("chartId").removeAttribute("_echarts_instance_"); 
          const chart = echarts.init(document.getElementById('chartId') as HTMLDivElement);
          chart.setOption({
              title: {
                  text: "表格标题"
              },
              tooltip: {
                  trigger: 'axis', //提示框组件
              },
              xAxis: {
                  name: "x轴名称",
                  data: [] //x轴显示的数据
              },
              legend: { //图例组件
                  data: ['第一条线','第二条线'] //多条折现的图例组件名称
              },
             // yAxis: { //一条折现时
             //     position:'left',
             //     name: "金额"
             // },
              yAxis: [ //两条折现
              {
               position:'left',
               name: "金额"
              },
              {
                position:'right',
             	name: "笔数"
              }
              ]
              series: [
                  {
                      name: yAxisSeriesName1,
                      yAxisIndex: 1, //使用第二Y轴
                      type: "line", // bar 柱状图
                      label: {
                          show: true //显示折现上的数字
                      },
                      itemStyle: {
                          color: '#32CD32'
                      },
                      data: []
                  },
                  {
                      name: yAxisSeriesName,
                      type: "line", 
                      label: {
                          show: true
                      },
                      itemStyle: {
                          color: '#5c7bd9'
                      },
                      data: []
                  }
              ]
          });
      	}
      }
</script>

把data数组中的所有count，添加到另外一个数组

private getCount(data) {
  this.transactionCountList = data.map(function (item) { return item.count});
}