基于vue的Echarts基本使用

简介：

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:true,  //显示图例
            icon:"circle",  //形状
            top:"10%"  //位置
         },
         xAxis:{
             data:["张三","王五","李四","赵六"]
         },
         yAxis:{  },
         series:{
             name:"第一天做可视化图表",  //图例
             type:"bar",
             data:[6201,5554,4215,2222],
           
         }
     })
    }
}
</script>

<style>
#root{
    height: 234px;
    width:333px;
    border: 1px solid red;
}

</style>

2.在App.vue中注册组件并使用

组件使用三大步：1.引入组件

                             2.注册组件

                            3.使用组件

<template>
  <div>

     <echarts/>   /*3.使用组件*/

  </div>
</template>

<script>
// import Student from './Student.vue'
// import people from './people.vue'

//导入图表
import echarts from './assets/views/About.vue'   //1.导入组件
export default {
  name:'App',
  components:{
   
    echarts  //2.注册组件
  
  },

}
</script>

<style>
</style>

3.图表展示