echarts绘制表图的简单用法

秒速五厘米 2021-10-19 09:18 411阅读 0赞

### 目录 ###

*  前言
 *  安装依赖包
 *  全局引用
 *  效果图

# 前言 #

[ECharts][]，一个使用 JavaScript 实现的开源可视化库，遵循 Apache-2.0 开源协议，免费商用。可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。  
除了PC端，小程序echarts也是支持试用的

# 安装依赖包 #

npm install echarts -save

# 全局引用 #

在main.js下

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

在需要vue里的template写入

<template>
      <div id="app">
        <div id="myChart" :style="{width: '800px', height: '500px'}"></div>
      </div>
    </template>

按照官网给的属性绘制我们想要图标

<script>
    export default { 
      name: 'app',
      data () { 
        return { 
        }
      },
      mounted(){ 
        this.drawLine();
      },
      methods: { 
        drawLine(){ 
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({ 
                title: {  text: '在Vue中使用echarts小demo' },
                tooltip: { },
                xAxis: { 
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: { },
                series: [{ 
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
      }
    }
    </script>

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]

[ECharts]: https://echarts.apache.org/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]: /images/20211018/df41743e50fb4785ac6bc434b52cdb60.png

发表评论取消回复

表情：

评论列表（有 0 条评论，411人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts formatter用法

ECharts 中 formatter 是一个格式化函数，用于格式化提示框(tooltip)和图例(legend)中的文本显示。其函数接收一些参数，返回格式化后的字符串，以在图

快来打我*/ 2024年03月25日 11:31/ 0 赞/ 106 阅读

相关 UML图绘制 -- 用例图

一.[用例图][Link 1]的作用用例图主要用来描述“用户、需求、系统功能单元”之间的关系。它展示了一个外部用户能够观察到的系统功能模型图。【用途】：帮助开发

浅浅的花香味﹌/ 2023年10月14日 19:41/ 0 赞/ 65 阅读

相关用latex简单绘制UML图

绘制UML图文章简介几段实例代码类中的数据成员与成员函数类中的成员可见性

蔚落/ 2022年12月03日 13:22/ 0 赞/ 352 阅读

相关 echart 图绘制--基础使用

文章目录学习echart 简单绘制图像如何使用echart 如何查阅文档文档内容解析

你的名字/ 2022年11月12日 14:58/ 0 赞/ 290 阅读

相关 ECharts绘制折线图

首先看实现好的页面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

太过爱你忘了你带给我的痛/ 2022年11月10日 14:25/ 0 赞/ 328 阅读

相关 python绘制简单彩虹图_python绘制简单彩虹图

本文实例为大家分享了python绘制彩虹图的具体代码，供大家参考，具体内容如下 ![74eea6df0902428c68de04feb31e779f.png][] 代码：

川长思鸟来/ 2022年11月01日 00:50/ 0 赞/ 246 阅读

相关 echarts折线图和柱状图结合绘制

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ5

阳光穿透心脏的1/2处/ 2022年09月11日 07:28/ 0 赞/ 405 阅读

相关 echarts的简单用法

1.js部分，将echarts.js引入，通过setoption的方法传入数据， <script src="js/echarts.js"></script>

喜欢ヅ旅行/ 2022年06月08日 10:12/ 0 赞/ 162 阅读

相关 echarts绘制表图的简单用法

目录前言安装依赖包全局引用效果图前言 [ECharts][]，一个使用 JavaScript 实现的开源可视化库，遵循 Apac

秒速五厘米/ 2021年10月19日 09:18/ 0 赞/ 412 阅读

相关 vue+echarts的用法

最近开发后台管理时用到了echarts这个组件，在使用过程中也遇到坑。 1. 我们首先需要将写一个具备高宽的 DOM 容器。 <div style="width

柔光的暖阳◎/ 2021年10月19日 05:46/ 0 赞/ 310 阅读