基于vue的Echarts基本使用

最新推荐文章于 2025-03-09 16:39:45 发布

小辉懂编程

最新推荐文章于 2025-03-09 16:39:45 发布

阅读量235

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/m0_69097184/article/details/129908731

简介：

ECharts是一个基于JavaScript的开源可视化库，用于创建交互式的、可自定义的图表和图形。ECharts支持多种类型的图表，包括折线图、柱状图、饼图、散点图等。

它具有优秀的性能和灵活的配置，可以轻松实现数据可视化的效果。

ECharts支持多种数据格式，包括JSON、CSV、XML等，可以与大多数前端框架集成，如React、Vue等。

ECharts是由百度开发并维护的，是目前最受欢迎的数据可视化库之一。

安装：(官网参考：快速上手 ECharts)

npm  install echarts --save

引入Echarts:

使用vue2进行挂载渲染，代码如下：

<template>
    <div>
        <div id="root" ref="view"></div>
    </div>
  
</template>

<script>
import * as echarts from "echarts"  //引入Echarts 所有组件并设为别名为echarts
export default {
    name:'About',
    mounted(){     //设置钩子，初始化数据
     let myecharts =   echarts.init(this.$refs.view)
     //设置参数
     myecharts.setOption({   
         title:{
             text:"helloworld"
         },
         legend:{ //图例
             show