Echarts

Vue中使用Echarts

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

ECharts: 一个基于 JavaScript 的开源可视化图表库。

安装 echarts

npm install echarts --save

main.js 中引入

// 部分代码展示
import * as echarts from 'echarts'
  
const app = createApp(App);

// vue3 给原型上挂载属性
app.config.globalProperties.$echarts = echarts;


app.use(store).use(router).use(ElementPlus).mount('#app');

组件中使用

<template>
  <div id="myChart" :style="{  width:'600px', height: '300px' }"></div>
</template>

<script>

export default {
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    //this.$root => app
    console.log(this.echarts)
    let myChart = this.$echarts.init(document.getElementById("myChart"));
    // 绘制图表
    myChart.setOption({
      title: { text: "总用户量" },
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

柱状图

myChart.setOption({
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    });

饼图

myChart.setOption({
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 335,
              name: '直接访问'
            },
            {
              value: 234,
              name: '联盟广告'
            },
            {
              value: 1548,
              name: '搜索引擎'
            }
          ]
        }
      ]
    });

散点图

myChart.setOption({
      xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      },
      yAxis: {},
      series: [
        {
          type: 'scatter',
          data: [220, 182, 191, 234, 290, 330, 310]
        }
      ]

    });

异步加载数据

前端

<template>
  <div :style="{  width:'600px', height: '300px' }" ref="chart"></div>
</template>

<script>

export default {
  data() {
    return {
      myChart:{}
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.chart);
    // 绘制图表
    this.myChart.setOption({
      title: {
        text: '异步数据加载示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: []
        }
      ]
    });

    this.$http.get('echarts').then(resp=>{
      this.myChart.setOption({
        xAxis: {
          data: resp.data.categories
        },
        series: [
          {
            // 根据名字对应到相应的系列
            name: '销量',
            data: resp.data.data
          }
        ]
      });
    });
  },
};
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

ECharts 中在更新数据的时候需要通过name属性对应到相应的系列，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据。

后端

@RestController
@RequestMapping("echarts")
public class EchartController {

    @GetMapping
    public Map<String,Object> getData(){
        Map<String,Object> map = new HashMap<>();
        String[] categories = new String[]{"衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"};
        map.put("categories",categories);

        int[] data = new int[]{5, 20, 36, 10, 10, 20};
        map.put("data",data);
        return map;
    }
}

loading 动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

案例：

前端：

<template>
  <div :style="{  width:'600px', height: '300px' }" ref="chart"></div>
</template>

<script>

export default {
  data() {
    return {
      myChart:{}
    };
  },
  mounted() {
    // let myChart = this.$echarts.init(document.getElementById("myChart"));
    this.myChart = this.$echarts.init(this.$refs.chart);
    // 绘制图表
    this.myChart.setOption({
      title: {
        text: '异步数据加载示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: []
        }
      ]
    });

    this.myChart.showLoading();
    this.$http.get('echarts').then(resp=>{
      this.myChart.hideLoading();
      this.myChart.setOption({
        xAxis: {
          data: resp.data.categories
        },
        series: [
          {
            // 根据名字对应到相应的系列
            name: '销量',
            data: resp.data.data
          }
        ]
      });
    });
  },
};
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

后端

@RestController
@RequestMapping("echarts")
public class EchartController {

    @GetMapping
    public Map<String,Object> getData() throws InterruptedException {
        Map<String,Object> map = new HashMap<>();
        String[] categories = new String[]{"衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"};
        map.put("categories",categories);

        int[] data = new int[]{5, 20, 36, 10, 10, 20};
        map.put("data",data);

        Thread.sleep(3000);
        return map;
    }
}