ECharts用法及常用配置项详解（Vue环境）

于 2023-11-05 21:50:54 发布
阅读量1.6k 收藏 7
点赞数
分类专栏： VUE 文章标签： echarts vue.js 前端

文章目录

一、案例展示

本例通过一个 echarts 图表的 demo 来熟悉图表的各属性；

此 demo 实现了图表数据的展示、缩放、全屏展示、拖拽以及自定义工具如图表切换等功能；效果如下：
在这里插入图片描述

二、ECharts 用法与常用属性介绍

在这里插入图片描述

2.1 在项目中引入 ECharts

  1. 首先使用 npm下载安装 ECharts；
npm install echarts --save
  1. 在项目的 main.js 文件中引入（此处为全局引入，后续在单个 .vue 页面中无需再引）；
//引入
import echarts from 'echarts'
import * as Echarts5 from 'echarts5' //echarts新版本echarts5
 
//使用
Vue.prototype.$echarts = echarts;
Vue.prototype.$echarts5 = Echarts5; //新版本

2.2 绘制图表

  1. 首先为 ECharts 准备一个定义了高宽的 DOM 容器；
<template>
  <div>
   <!--图表的dom-->
   <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
  1. 初始化 echarts 实例并显示图表
  • 重点注意：其中const option = { }就是我们需要引进echart图表的代码
  • 在 vue 的 methods:{ } 中定义方法绘制图表，初始化 echarts 实例；
<script>
  export default {
    data() {
      return {}
    },
    methods: {
      drawChart() {
        //初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main'));
 
        //图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        //使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    },
    mounted() {
      //调用方法
      this.drawChart();
    }
  }
</script>

在这里插入图片描述

注意在 vue 中初始化 echarts 实例与官网稍有不同，需要将 echarts.init 改为 this.$echarts.init ，定义后的方法也需要在 vue 挂载阶段 mounted(){ } 中进行调用。确保dom元素已经挂载到页面中。

2.3 常用配置项

title标题组件，包含主标题和副标题。
tooltip提示框组件。
legend图例组件，可选 plain 普通图例、scroll 可滚动翻页的图例。
grid直角坐标系内绘图网格，可以在网格上绘制折线图，柱状图，散点图（气泡图）。
xAxisx轴。
yAxisy轴
dataZoom区域缩放，常用的为内置型数据区域缩放组件（dataZoomInside），内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
visualMap视觉映射组件，常用于地图当中。
toolbox工具栏，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具；除了内置工具之外，还可以自定义工具，写于 feature 内。
geo地理坐标系组件，用于地图的绘制。
dataset数据集组件，用于单独的数据集声明。

更多详情请参见 ECharts 官网的配置项手册：

Documentation - Apache ECharts
ECharts, a powerful, interactive charting and visualization library for browser
https://echarts.apache.org/zh/option.html#title

官网链接：Apache ECharts

在官网给出了我们许多示例：链接
在这里插入图片描述
我们都可以直接拿来用，但是里面的一些配置我们可以根据自己的需求来修改，所以我们需要了解ECharts的基础配置。

【Echarts】一文快速上手Echarts（持续更新）

怎么让 echarts 图表动起来？定时器解决它 —— 大屏展示案例（动态仪表盘、动态柱状图）

三、案例完整代码 + 详细注释

<template>
  <div class="main">
    <div class="echarts">
      <!--为Echarts定义自定义宽高的容器-->
      <!--左侧柱图-->
      <div id="bar" style="width:50%;height:600px"></div>
      <!--右侧饼图和折线图-->
      <div class="echarts2" >
        <!--饼图-->
        <div id="pie" style="width:50%;height:280px"></div>
        <!--折线图-->
        <div id="line" style="width:50%;height:300px;top:200px"></div>
      </div>
    </div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        //此处是柱图中的数据，便于引用数据的举例；饼图和折线图数据我直接写在了option内
        array: [
          ['公司名', 'A公司', 'B公司', 'C公司'],
          ['周一', '90', '85', '50'],
          ['周二', '110', '85', '60'],
          ['周三', '150', '145', '60'],
          ['周四', '190', '100', '80'],
          ['周五', '90', '110', '110'],
          ['周六', '90', '130', '60'],
          ['周日', '60', '45', '80']
        ]
      }
    },
    name: "Echarts",
    methods: {
      //绘制柱状图
      drawChart_bar() {
        //初始化Echarts实例，注意在vue中要使用 this.$echarts.init
        let myEchart = this.$echarts.init(document.getElementById("bar"));
        //指定图表配置项和数据
        let option = {
          // 内置型缩放
          dataZoom: {
            type: 'inside'
          },
          //提示框
          tooltip: {
            trigger: 'item',
          },
          //工具栏
          toolbox: {
            padding: [7, 6],
            show: true,
            //自定义工具
            feature: {
              magicType: {
                type: ["line", "bar"]
              },
              //配置项还原
              restore: {},
              //保存为图片
              saveAsImage: {},
              //定义全屏展示，注意在不同的浏览器全屏展示写法也是不同的
              mytool1: {
                show: true,
                title: '全屏展示',
                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                onclick: () => {
                  this.fullFlag = true;
                  let element = document.getElementById('bar');
                  // element.setOption(pacchartOption4);
                  if (element.requestFullScreen) { //HTML W3C 提议
                    element.requestFullScreen();
                  } else if (element.msRequestFullscreen) { //IE11
                    element.msRequestFullScreen();
                  } else if (element.webkitRequestFullScreen) { //Webkit (works in Safari5.1 and Chrome 15)
                    element.webkitRequestFullScreen();
                  } else if (element.mozRequestFullScreen) { //Firefox (works in nightly)
                    element.mozRequestFullScreen();
                  }
                  // 退出全屏
                  if (element.requestFullScreen) {
                    document.exitFullscreen();
                  } else if (element.msRequestFullScreen) {
                    document.msExitFullscreen();
                  } else if (element.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen();
                  } else if (element.mozRequestFullScreen) {
                    document.mozCancelFullScreen();
                  }
                }
              }
            },
          },
          //标题
          title: {
            text: "2024分公司年度资金流水",
            subtext: "2月份第四周",
            left: 'center',
            show: true,
            padding: [10, 5]
          },
          //数据集
          dataset: {
            source: this.array, //引用data中的数据
          },
          //图例
          legend: {
            orient: "horizontal",
            top: '96%',
            itemHeight: 9,
          },
          //X轴
          xAxis: {
            //类目轴
            type: 'category',
            //相对于默认位置的偏移
            offset: 6,
            name: '日期',
            nameLocation: "end",
            axisTick: {
              show: true
            }
          },
          //Y轴
          yAxis: {
            //数值轴
            type: 'value',
            name: '数量(万元)'
          },
          series: [
            {
              type: 'bar',
              //坐标轴显示器的文本标签
              label: {
                show: true,
                position: 'top',
                color: 'gray'
              },
            },
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: 'gray'
              },
            },
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: 'gray'
              },
            },
          ]
        };
        //显示图表
        myEchart.setOption(option);
      },
      //饼图
      drawChart_pie() {
        var myChart1 = this.$echarts.init(document.getElementById('pie'));
        var option = {
          title: {
            text: '五大城市中公司主要业务量情况',
            subtext: '2024年第一季度',
            left: 'center',
            padding: [10, 5]
          },
          //工具栏
          toolbox: {
            padding: [7, 11],
            show: true,
            feature: {
              saveAsImage: {},
              dataView: {}
            }
          },
          //提示框组件
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: '10',
            top: '4'
          },
          series: [
            {
              name: '业务量：',
              type: 'pie',
              radius: '50%',
              data: [
                {value: 1048, name: '北京'},
                {value: 735, name: '上海'},
                {value: 580, name: '广州'},
                {value: 484, name: '深圳'},
                {value: 300, name: '成都'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
            }
          ]
        };
        myChart1.setOption(option);
      },
      //折线图
      drawChart_line() {
        var myChart2 = this.$echarts.init(document.getElementById('line'));
        var option = {
          title: {
            text: '股市走向',
            left: '10',
            top: '5'
          },
          //滑动条型缩放显示
          // dataZoom: {
          //   type: 'slider'
          // },
          toolbox: {
            show: true,
            padding: [7, 11],
            feature: {
              saveAsImage: {},
              dataView: {}
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['A股', 'B股', 'C股', 'D股'],
            top: '10'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
            axisLabel: {
              rotate: 45,
              margin: 11,
              formatter: function (value, index) {
                return value + '年'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: function (value, index) {
                if (value >= 1000) {
                  return value = value / 1000 + 'k';
                } else {
                  return value;
                }
              }
            }
          },
          series: [
            {
              name: 'A股',
              type: 'line',
              //数据堆叠
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
              name: 'B股',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: 'C股',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: 'D股',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        };
        myChart2.setOption(option);
      },
      //实现拖拽
      drag() {
        var box = document.querySelector('#bar');
        var starX = null;
        var starY = null;
        var left = null;
        var top1 = null;
        box.onmousedown = function (ev) {//给要移动的那个div加鼠标按下事件
          ev = ev || window.event;//event做ie兼容
          starX = ev.pageX;
          starY = ev.pageY;
          left = box.offsetLeft;//到父级的左侧距离
          top1 = box.offsetTop;//到父级的顶部距离
          document.onmousemove = function (ev) {//给整个文档加移动事件
            ev = ev || window.event;
            var dia = ev.pageX - starX;//鼠标现在的距离减去之前的距离 得到一个差值
            var dib = ev.pageY - starY;
            box.style.top = top1 + dib + 'px';//重新给box的顶部和left赋值
            box.style.left = left + dia + 'px';
          };
          document.onmouseup = function () {
            document.onmousemove = null;//解除绑定移动事件
            document.onmouseup = null;//解除绑定抬起事件
          };
          console.log(starX, starY)
        }
      }
    },
 
    mounted() {
      //调用方法
      //画图
      this.drawChart_bar();
      this.drawChart_pie();
      this.drawChart_line();
      //拖拽
      this.drag();
    }
  }
</script>
 
<style scoped>
  .main {
    position: relative;
    margin-top: -0.3rem;
  }
 
  .echarts {
    display: flex;
    justify-content: space-between;
  }
 
 
  #bar {
    width: 50%;
    height: 8rem;
    background-color: #FFFFFF;
    margin-top: 0.1rem;
    position: absolute;
    z-index: 1;
  }
 
  .echarts2 {
    width: 49.5%;
    height: 8rem;
    margin-left: 50.5%;
    margin-top: 0.1rem;
  }
 
  .echarts2 #pie {
    width: 49.5%;
    height: 3.95rem;
    background-color: #FFFFFF;
    margin-bottom: 0.1rem;
    position: absolute;
  }
 
  .echarts2 #line {
    width: 49.5%;
    height: 3.95rem;
    background-color: #FFFFFF;
    position: absolute;
    margin-top: 4.05rem;
  }
</style>
qq_39093474
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3分钟搞懂Vue整合Echarts实现可视化界面_vue+echarts
2401_84435942的博客
04-28 1088
一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
小程序——npm echarts
weixin_42132044的博客
09-15 929
echarts官网说明 下载echarts依赖包并拷贝到指定位置 components 导入echarts自定义组件 { "usingComponents": { "ec-canvas": "/components/ec-canvas/ec-canvas" } } 模板中wxml添加标签组件 必须提供一个容器view 并且指定高度 ec-canvas 标签需要设置样式：宽度和高度 <view class="container"> <ec-canv
【Echarts】在Vue中使用Echarts
weixin_46443403的博客
03-05 5782
Vue，Echarts
【Echarts】一文快速上手Echarts（持续更新）
热门推荐
慕白Lee的博客
10-29 13万+
如示例代码中的dataFormatter方法就是将原始数据进行格式化，转换为Echarts图表渲染所需要的形式，将Echarts官网的图表对应代码迁移到Vue文件中。如示例代码中的option、dataMap等，它们保存了一些原始数据或者Echarts图表渲染的属性值等。这行代码的意思就是将Echarts引入到Vue文件中，然后就可以直接使用Echarts的功能了。那肯定代码错了呗, 你对比对比上面的代码。以该例为例，是如下代码。选择一个最基本的柱状图吧。
echarts：基本使用
snowball的博客
11-01 4778
调试，好几次调试成功了，但是代码拿到网易BI就不太好使，我相信是我个人的原因；我把相关代码删减到极简状态，然后再次调试，寻找合适的mapjson，最终在网易BI可以展示全国地图了。，普通的开发正常按照步骤调试即可，网易bi有一点错误就会报错，也不能定位到具体的问题；这个小小示例，集成了echarts使用的基本步骤。3、获取 DOM 元素（容器），初始化 Echarts 实例。个人觉得，网易BI开发和在普通浏览器环境开发还是。5、使用配置项和数据渲染图表（渲染到容器中）4、指定图表的配置项和数据。
Echart用法介绍
low神
11-14 5070
Echart用法介绍 Echart官方文档 Echart实例创建步骤 1.准备一个DOM容器 2.通过init方法初始化一个echarts实例 3.将图标配置数据传给setOption方法绘制图表 Echart常用配置信息介绍 基本配置信息： grid（图表相对画布的位置） title（表头） tooltip（鼠标移上悬浮窗显示数据） legend（不同线或色块代表的数据类型） xAxis（x...
ECharts入门
qq_45835940的博客
01-03 3152
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
vue相关配置文件详解及多环境配置详细步骤
10-15
sop-vue
详解vue文件中使用echarts.js的两种方式
10-17
2. 在`WelcomePage.vue`中引入ECharts及相关图表类型： ```javascript // 引入基本模板，按需加载 let echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); // 引入...
详解vue 不同环境配置不同的打包命令
10-17
主要介绍了详解vue不同环境配置不同的打包命令，主要包括正式环境、测试环境和开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在Vue中使用echarts的方法
08-28
在Vue中使用ECharts的方法 Vue框架是当前最流行的前端框架之一，ECharts是中国最流行的数据可视化工具之一。在实际项目中，我们经常需要将ECharts集成到Vue项目中，以实现数据的可视化展示。因此，本文将详细介绍...
echarts使用小结
10-26
echarts 基本使用方法和总结，
Echarts3配置项手册离线网页版
02-06
完整拷贝官网配置项页面,彻底离线查询各个配置项.........
echarts使用方法
02-11
里面是echarts的一些简单例子，适合初学者参考。请使用visual studio2012或者2013打开，使用asp.net mvc3写的
VUE笔记（十）Echarts
m0_74343097的博客
08-26 1083
ECharts是一款基个基于 JavaScript 的开源可视化图表库ISQQW.COM x ECharts 文档（国内同步镜像） - 配置项echarts图表集。
Echarts数据可视化
m0_56355797的博客
10-27 1013
Echarts可以数据用图表的方式清晰的展现出来，让用户有更好的查阅数据的体验，也让数据变得高大上起来，实现了数据可视化。Echarts的配置项非常多，全记下来不太可能，这也就要求我们会查阅官网根据官方文档进行选择配置项。
Vue中配置并运行echarts的超详细步骤
viva20的博客
08-25 2418
vue，echart，使用教程
ECharts 学习
zcy的博客
07-10 668
一、五分钟上手ECharts 我这里是用PyCharm做的，不过ECharts本身是JavaScript，无论是PyCharm还是IDEA都是一样的。 先去Github上下载ECharts：https://github.com/apache/echarts 解压后，将echarts.min.js放到项目中(通常Web项目是放在static的js目录下，这里为了方便起见就和html放一起了) 新建一个HTML并引入ECharts <!DOCTYPE html> <htm
echart的基本使用方法
weixin_69797846的博客
07-26 5376
echart基本配置方法
vue.config.js常用配置详解
最新发布
12-31
以下是vue.config.js常用配置的一些示例： 1. 修改输出目录 ```javascript module.exports = { outputDir: 'dist' // 将构建好的文件输出到dist目录下 } ``` 2. 配置代理 ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', // 将/api开头的请求代理到本地的3000端口 changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 3. 自定义webpack配置 ```javascript module.exports = { configureWebpack: { // 自定义webpack配置 resolve: { alias: { '@': path.resolve(__dirname, 'src') // 设置@为src目录的别名 } } } } ``` 4. 添加全局样式 ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/variables.scss";` // 在每个组件中都可以使用全局的变量 } } } } ``` 5. 配置打包分析 ```javascript const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { configureWebpack: { plugins: [ new BundleAnalyzerPlugin() // 打包分析 ] } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值