echarts绘制表图的简单用法

秒速五厘米 2021-10-19 09:18 356阅读 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 条评论，356人围观）

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

相关阅读

相关 echarts formatter用法

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

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

相关测试用例--因果图、判定表法

一、应用场合在界面中有多个控件，控件之间有组合或限制关系，不同的输入组合会对应不同的输出结果，如果想弄清楚不同的输入组合到底对应哪些输出结果，可以使用因果图/判定表法。(

Love The Way You Lie/ 2022年12月07日 11:51/ 0 赞/ 180 阅读

相关用latex简单绘制UML图

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

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

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

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

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

相关 ECharts绘制折线图

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

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

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

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

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

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

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

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

相关 echarts的简单用法

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

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

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

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

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

相关 vue+echarts的用法

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

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