Vue中echarts简单使用

首先因为我是在一个项目中直接使用的，所以写基本的路由之类的就不在叙述了，我的前提就是在在一个可以运行的系统使用echarts
首先有一个用来存储数据的组件，一个用来显示的即可。

我们需要完成的如图所示
我们该怎么做呢

因为我们的路由所以我们需要在指定的文件夹下面新建一个index做我们页面，然后我们在index中

<script>
    import columnChart from "../columnChart.vue";

在js里面引入我们的组件

        components: {
            columnChart
        },

然后在component里面引入插件
然后按照名称在页面中写入组件

<column-chart :id="'singledeptin'" :height="'400px'" style="width:100%;" ref="singledeptin"></column-chart>

然后我们在本页面调用这个

mounted() {
            // this.getDataList();
            this.$nextTick(() => {
                console.log(this.$refs);
                //图表显示
                this.$refs.singledeptout.singledeptouts();
                this.$refs.singledeptin.singledeptins();
            });
        },

相信会使用ref的同学看出来了，我们在组件上面使用ref一个变量名在下面进行调用，然后singledeptouts方法是在组件页面中的

<template>
  <div :id="id" :style="{height:height,width:width}"></div>
</template>

在组件里面定义这个便于我们使用
然后在js里面写这些

import echarts from "echarts";
  export default {
    // mixins: [resize],
    props: {
      id: {
        type: String,
        default: "chart"
      },
      width: {
        type: String,
        // default:document.body.clientWidth+"px"
        default: "100%"
      },
      height: {
        type: String,
        default: "300px"
      }
    },

然后我们就可以在method里面去书写具体的方法了

我们可以先去echarts官网寻找合适的图，https://echarts.apache.org/examples/zh/index.html
这是官网，然后我们找到合适的图形

然后将我们选中的内容复制一下
打开我们组件中的具体的方法中，给你们一个例子看一下

 //   部门支出1
      deptOuts1() {
        this.chart = echarts.init(document.getElementById(this.id));
        this.chart.setOption(
                {
                  color: ['#1bfce9','#f8e007', '#e80c97'],
                  legend: {},
                  tooltip: {},
                  dataset: {
                    dimensions: ['product', '预算额度', '已用额度', '超额'],
                    source: [
                      {product: '部门1',   '预算额度': 65000, '已用额度': 35000, '超额': 0},
                      {product: '部门2',   '预算额度': 45000, '已用额度': 35000, '超额': 0},
                      {product: '部门3',   '预算额度': 25000, '已用额度': 35000, '超额': 0},
                      {product: '部门4',   '预算额度': 61000, '已用额度': 35000, '超额': 0},
                      {product: '部门5',   '预算额度': 40000, '已用额度': 35000, '超额': 0},
                      {product: '部门6',   '预算额度': 0,     '已用额度': 30000, '超额': 30000},
                      {product: '部门7',   '预算额度': 45000, '已用额度': 35000, '超额': 0},
                      {product: '部门8',   '预算额度': 35000, '已用额度': 35000, '超额': 0},
                      {product: '部门9',   '预算额度': 35000, '已用额度': 35000, '超额': 0},
                      {product: '部门10',  '预算额度': 55000, '已用额度': 35000, '超额': 0},
                    ]
                  },
                  xAxis: {type: 'category'},
                  yAxis: {},
                  // Declare several bar series, each will be mapped
                  // to a column of dataset.source by default.
                  series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                  ]
                },
                true
        );
      },

将内容复制到指定位置
我在这里修改了一下颜色

color: ['#1bfce9','#f8e007', '#e80c97'],

其实这个是可以随便改变的，毕竟颜色或者任何echarts上面的元素都是可以变化的
然后其他的有具体的echarts文档我就不多叙述了