ECharts图表 HTML页面使用&vue组件使用

最新推荐文章于 2023-11-09 15:23:02 发布

weixin_43297321

最新推荐文章于 2023-11-09 15:23:02 发布

阅读量1.8k

点赞数 1

分类专栏： vue+node项目复盘 node.js vue 文章标签： Echarts html vue

本文链接：https://blog.csdn.net/weixin_43297321/article/details/107971791

版权

node.js 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

vue+node项目复盘

4 篇文章 1 订阅

订阅专栏

ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网介绍echarts：https://echarts.apache.org/zh/feature.html

HTML页面使用

官方实例展示：https://echarts.apache.org/examples/zh/index.html

比如说我想在页面中使用官网实例中展示的这个，

在这里插入图片描述
点进去，会看到下面这个样子

在这里插入图片描述
现在该怎么办嘞，打开官方教程，来建立自己的第一个echarts小图表
官网快速上手：https://echarts.apache.org/zh/tutorial.html

根据文档教程，先获取 ECharts；然后引入 ECharts；在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器；然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 下载echarts：npm install echarts --save -->
    <!-- 引入echarts资源包 -->
    <script src="./node_modules/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [70, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {}
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述
当然使用不同的图表，以不同的方式使用，编写和显示有所不同。但是我发现，会看文档很重要。

VUE组件使用

先安装echarts插件：cnpm install echarts -S

然后在项目src目录下的main.js中全局引入echarts：

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

然后在相关组件中使用图表：使用的时候注意一个问题，因为我们引入的时候，把echarts以$ echarts的身份放入到vue的原型中，所以在使用echarts的时候我们也要写成this.$echarts的形式。

<template>
 <div>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px;height:400px;"></div>
 </div>
</template>

<script>
export default {
  data(){
      return {
          arra: [70, 932, 901, 934, 1290, 1330, 1320]
      }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，通过 this.$echarts 初始化echarts实例
        var myChart = this.$echarts.(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: this.arra,
                type: 'line',
                areaStyle: {}
            }]
        });
    }
  }
}
</script>

<style scoped>
    
</style>

在这里插入图片描述

参考：在Vue中使用echarts

weixin_43297321

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
ECharts图表 HTML页面使用&vue组件使用

EChartsECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。官网介绍echarts：https://echarts.apache.org/zh/feature.htmlHTML页面使用官方实例展示：https://echarts.apache.org
复制链接

扫一扫