Vue中使用Echarts

落日与晚风，

于 2023-11-27 16:35:45 发布

阅读量445

点赞数 10

文章标签： arcgis

本文链接：https://blog.csdn.net/llllll__ll/article/details/134648841

版权

本文介绍了Echarts，一个基于JavaScript的开源可视化图表库，通过npm安装并展示了如何在Vue组件中使用它创建线图、柱状图和饼图，以及如何修改颜色和数据。

摘要由CSDN通过智能技术生成

什么是Echarts

Echarts是一个基于 JavaScript 的开源可视化图表库

官方文档

Apache ECharts

使用

1，NPM 安装 ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

2，//全局引入echarts

import * as echarts from 'echarts'

Vue.prototype.$echarts=echarts

3，在组件中引用

一个div就表示将来的一个图形

<template>
  <div>
    <div id="line" style="width: 400px; height: 300px;float: left;"></div>
    <div id="hello" style="width: 400px; height: 300px;float: left;"></div>
    <div id="hello1" style="width: 400px; height: 300px;float: left;"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {
      myEcharts() {
        var line = this.$echarts.init(document.getElementById("line"));
        //配置图表
        var option = {
          title: {
            text: "Column Chart"
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [{
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          }, ],
        };
        line.setOption(option);
      },
      newEcharts() {
        var line = this.$echarts.init(document.getElementById("hello"));
        //配置图表
        var option = {
          //x轴
          xAxis: {
            type: 'category', //坐标轴类型
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          //y轴
          yAxis: {
            type: 'value'
          },
          //系列
          series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }]
        }
        line.setOption(option);
      },
      newEcharts2() {
        var line = this.$echarts.init(document.getElementById("hello1"));
        //配置图表
        var option = {

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

    },
    mounted() {
      this.myEcharts();
      this.newEcharts();
      this.newEcharts2();
    },
  }
</script>

4,查看效果