• ECharts的基本使用

    目录

    一、使用前提

    1、安装

    2、创建文件

    二、LineView.vue文件【相当于一个组件】

    1、导入

    2、methods方法下写init(){}方法进行选择

    3、methods方法下写setOptioin(option)

    4、init()函数调用

    5、整合完整代码

    三、IndexView.vue文件【实现组件引入显示】

    1、引入

    2、注册

    3、显示

    四、数据操作

    1、series系列

    2、title标题

    3、legend图例

    4、tooltip提示框

    五、地图

    1、前期准备

    2、设置配置项

    3、点击事件

    六、动态数据渲染

    1、问题提出

    2、解决方案

    整篇文章将通过实例讲述ECharts的基本使用

    官网：快速上手 - Handbook - Apache ECharts

    一、使用前提

    1、安装

    npm install echarts --save

    2、创建文件

    （1）在views文件夹下=》创建echarts=》创建LineView.vue文件

    （2）在views文件夹下=》创建IndexView.vue【用于所有图片的展示】

    二、LineView.vue文件【相当于一个组件】

    1、导入

    1. //5.0以上版本
    2. import * as echarts from 'echarts'
    3. //5.0以下
    4. import  echarts from 'echarts'

    2、methods方法下写init(){}方法进行选择

    （1）获取dom元素

    const dom = document.getElementById('')

    （2）初始化表

    this.chart = echarts.init(dom)

    （3）配置项单独封装出去

    this.setOptions()

    3、methods方法下写setOptioin(option)

    （1）option的定义

    1. const option = {
    2.   xAxis: {
    3.     type: "category",
    4.     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    5.   },
    6.   yAxis: {
    7.     type: "value",
    8.   },
    9.   series: [
    10.     {
    11.       data: [150, 230, 224, 218, 135, 147, 260],
    12.       type: "line",
    13.     },
    14.   ],
    15. };

    （2）option的作用

    1. //作用：保证两样都有执行
    2. option && this.chart.setOption(option)

    4、init()函数调用

    属于dom渲染，根据生命周期，要在mounted()调用

    1. mounted() {
    2.   this.init()
    3. },

    5、整合完整代码

    2.  
    3. <script>
    4. import * as echarts from "echarts";
    5.  
    6. export default {
    7.   name: "LineView",
    8.  
    9.   data() {
    10.     return {};
    11.   },
    12.  
    13.   mounted() {
    14.     this.init();
    15.   },
    16.  
    17.   methods: {
    18.     init() {
    19.       // 获取dom元素
    20.       var dom = document.getElementById("line");
    21.       // 初始化表
    22.       this.chart = echarts.init(dom);
    23.       // 设置配置项
    24.       this.setOptions();
    25.     },
    26.     setOptions() {
    27.       const option = {
    28.         xAxis: {
    29.           type: "category",
    30.           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    31.         },
    32.         yAxis: {
    33.           type: "value",
    34.         },
    35.         series: [
    36.           {
    37.             data: [150, 230, 224, 218, 135, 147, 260],
    38.             type: "line",
    39.           },
    40.         ],
    41.       };
    42.  
    43.       option && this.chart.setOption(option);
    44.     },
    45.   },
    46. };
    47. script>
    48.  
    49. <style lang="scss" scoped>
    50. #line {
    51.   width: 500px;
    52.   height: 500px;
    53. }
    54. style>

    三、IndexView.vue文件【实现组件引入显示】

    1、引入

    import lineView from './echarts/lineView.vue';

    2、注册

    1. components:{
    2.     lineView
    3. },

    3、显示

    1. <div class="index">
    2.     
    3.     <div class="line">
    4.     <lineView>lineView>
    5.     div>
    6. div>
    1. .index {
    2.   width: 100%;
    3.   height: 100%;
    4.   .line {
    5.     width: 500px;
    6.     height: 500px;
    7.   }
    8. }

    四、数据操作

    1、series系列

    （1）折线图、柱状图

    1. series: [
    2.   {
    3.     data: [150, 230, 224, 218, 135, 147, 260],//数据
    4.     type: "line",//折线图
    5.     smooth: true,//平滑
    6.   },
    7.   {
    8.     data: [50, 30, 24, 18, 35, 147, 260],
    9.     type: "line",//折线图
    10.   },
    11.   {
    12.     data: [150, 230, 224, 218, 135, 147, 260],
    13.     type: "bar",//柱状图
    14.   },
    15. ],

    （2）饼图

    IndexView.vue

    2.  
    3. <script>
    4. import lineView from "./echarts/lineView.vue";
    5. import pieView from "./echarts/PieView.vue";
    6.  
    7. export default {
    8.   name: "IndexView",
    9.  
    10.   components: {
    11.     lineView,
    12.     pieView,
    13.   },
    14.  
    15.   data() {
    16.     return {};
    17.   },
    18.  
    19.   mounted() {},
    20.  
    21.   methods: {},
    22. };
    23. script>
    24.  
    25. <style lang="scss" scoped>
    26. .index {
    27.   width: 100%;
    28.   height: 100%;
    29.   display: flex;
    30.   .line {
    31.     width: 500px;
    32.     height: 500px;
    33.   }
    34.   .pie {
    35.     width: 500px;
    36.     height: 500px;
    37.   }
    38. }
    39. style>

    PieView.vue

    2.  
    3. <script>
    4. import * as echarts from "echarts";
    5.  
    6. export default {
    7.   name: "PieView",
    8.  
    9.   data() {
    10.     return {};
    11.   },
    12.  
    13.   mounted() {
    14.     this.init();
    15.   },
    16.  
    17.   methods: {
    18.     init() {
    19.       // 获取dom元素
    20.       var dom = document.getElementById("PiePage");
    21.       // 初始化表
    22.       this.chart = echarts.init(dom);
    23.       // 设置配置项
    24.       this.setOptions();
    25.     },
    26.     setOptions() {
    27.       const option = {
    28.         title: {
    29.           text: "饼状图",
    30.           subtext: "Fake Data",
    31.           left: "center",
    32.         },
    33.         tooltip: {
    34.           trigger: "item",
    35.         },
    36.         legend: {
    37.           orient: "vertical",
    38.           left: "left",
    39.         },
    40.         series: [
    41.           {
    42.             name: "Access From",
    43.             type: "pie",
    44.             radius: '50%', //饼状大小
    45.             data: [
    46.               //数据
    47.               { value: 1048, name: "Search Engine" },
    48.               { value: 735, name: "Direct" },
    49.               { value: 580, name: "Email" },
    50.               { value: 484, name: "Union Ads" },
    51.               { value: 300, name: "Video Ads" },
    52.             ],
    53.             emphasis: {
    54.               //高亮状态
    55.               itemStyle: {
    56.                 //样式
    57.                 shadowBlur: 10,
    58.                 shadowOffsetX: 0,
    59.                 shadowColor: "rgba(0, 0, 0, 0.5)",
    60.               },
    61.             },
    62.           },
    63.         ],
    64.       };
    65.  
    66.       option && this.chart.setOption(option);
    67.     },
    68.   },
    69. };
    70. script>
    71.  
    72. <style lang="scss" scoped>
    73. #PiePage {
    74.   width: 500px;
    75.   height: 500px;
    76. }
    77. style>

    ①通过radius指定外半径、内半径

    1. series: [
    2.   {
    3.     name: "Access From",
    4.     type: "pie",
    5.     radius: ['20%','50%'],//[内半径, 外半径]
    6.     data: [
    7.       { value: 1048, name: "Search Engine" },
    8.       { value: 735, name: "Direct" },
    9.       { value: 580, name: "Email" },
    10.       { value: 484, name: "Union Ads" },
    11.       { value: 300, name: "Video Ads" },
    12.     ],
    13.     emphasis: {
    14.       itemStyle: {
    15.         shadowBlur: 10,
    16.         shadowOffsetX: 0,
    17.         shadowColor: "rgba(0, 0, 0, 0.5)",
    18.       },
    19.     },
    20.   },
    21. ],

    ②文本标签

    1. const option = {
    2.   title: {
    3.     text: "饼状图",
    4.     subtext: "Fake Data",
    5.     left: "center",
    6.   },
    7.   tooltip: {
    8.     trigger: "item",
    9.   },
    10.   legend: {
    11.     orient: "vertical",
    12.     left: "left",
    13.   },
    14.   series: [
    15.     {
    16.       name: "Access From",
    17.       type: "pie",
    18.       radius: ["20%", "50%"], //[内半径, 外半径]
    19.       data: [
    20.         //数据
    21.         { value: 1048, name: "Search Engine" },
    22.         { value: 735, name: "Direct" },
    23.         { value: 580, name: "Email" },
    24.         { value: 484, name: "Union Ads" },
    25.         { value: 300, name: "Video Ads" },
    26.       ],
    27.       label:{
    28.         show:true,
    29.         position:'center'
    30.       },
    31.       emphasis: {
    32.         //高亮状态
    33.         itemStyle: {
    34.           //样式
    35.           shadowBlur: 10,
    36.           shadowOffsetX: 0,
    37.           shadowColor: "rgba(0, 0, 0, 0.5)",
    38.         },
    39.       },
    40.     },
    41.   ],
    42. };

    ③emphasis高亮状态

    1. const option = {
    2.   title: {
    3.     text: "饼状图",
    4.     subtext: "Fake Data",
    5.     left: "center",
    6.   },
    7.   tooltip: {
    8.     trigger: "item",
    9.   },
    10.   legend: {
    11.     orient: "vertical",
    12.     left: "left",
    13.   },
    14.   series: [
    15.     {
    16.       name: "Access From",
    17.       type: "pie",
    18.       radius: ["20%", "50%"], //[内半径, 外半径]
    19.       data: [
    20.         //数据
    21.         { value: 1048, name: "Search Engine" },
    22.         { value: 735, name: "Direct" },
    23.         { value: 580, name: "Email" },
    24.         { value: 484, name: "Union Ads" },
    25.         { value: 300, name: "Video Ads" },
    26.       ],
    27.       label:{
    28.         show:false,
    29.         position:'center'
    30.       },
    31.       //高亮状态
    32.       emphasis: {
    33.         //文字样式
    34.         label:{
    35.           show:true,
    36.           fontSize:20,
    37.           fontWeight:'bold'
    38.         },
    39.         //样式
    40.         itemStyle: {
    41.           shadowBlur: 10,
    42.           shadowOffsetX: 0,
    43.           shadowColor: "rgba(0, 0, 0, 0.5)",
    44.         },
    45.       },
    46.     },
    47.   ],
    48. };

    2、title标题

    1. const option = {
    2.   title:{
    3.     text:'统计图',
    4.     link:'https://www.baidu.com/',//跳转路径
    5.     target:'blank',//在新页面打开
    6.     textStyle:{
    7.       color:"blue",
    8.       fontSize:'26',
    9.       fontWeight:"bold",
    10.     },
    11.     left:'center',
    12.   },
    13.   xAxis: {
    14.     type: "category",
    15.     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    16.   },
    17.   yAxis: {
    18.     type: "value",
    19.   },
    20.   series: [
    21.     {
    22.       data: [150, 230, 224, 218, 135, 147, 260],
    23.       type: "line", //折线图
    24.     },
    25.     {
    26.       data: [50, 30, 24, 18, 35, 147, 260],
    27.       type: "line", //折线图
    28.     },
    29.     {
    30.       data: [150, 230, 224, 218, 135, 147, 260],
    31.       type: "bar", //柱状图
    32.     },
    33.   ],
    34. };

    3、legend图例

    1. const option = {
    2.   title:{
    3.     text:'统计图',
    4.     link:'https://www.baidu.com/',//跳转路径
    5.     target:'blank',//在新页面打开
    6.     textStyle:{
    7.       color:"blue",
    8.       fontSize:'26',
    9.       fontWeight:"bold",
    10.     },
    11.     left:'center',
    12.   },
    13.   legend: {
    14.     data: ['1', '2', '3'],//对应的系列
    15.     left:'right',
    16.   },
    17.   xAxis: {
    18.     type: "category",
    19.     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    20.   },
    21.   yAxis: {
    22.     type: "value",
    23.   },
    24.   series: [
    25.     {
    26.       name:'1',//对应图例
    27.       data: [150, 230, 224, 218, 135, 147, 260],
    28.       type: "line", //折线图
    29.     },
    30.     {
    31.       name:'2',
    32.       data: [50, 30, 24, 18, 35, 147, 260],
    33.       type: "line", //折线图
    34.     },
    35.     {
    36.       name:'3',
    37.       data: [150, 230, 224, 218, 135, 147, 260],
    38.       type: "bar", //柱状图
    39.     },
    40.   ],
    41. };

    4、tooltip提示框

    1. const option = {
    2.   title:{
    3.     text:'统计图',
    4.     link:'https://www.baidu.com/',//跳转路径
    5.     target:'blank',//在新页面打开
    6.     textStyle:{
    7.       color:"blue",
    8.       fontSize:'26',
    9.       fontWeight:"bold",
    10.     },
    11.     left:'center',
    12.   },
    13.   legend: {
    14.     data: ['1', '2', '3'],//对应的系列
    15.     left:'right',
    16.   },
    17.   tooltip:{
    18.     show:true,//展示
    19.     trigger:'axis',//同时显示三种数据，方便对比
    20.   },
    21.   xAxis: {
    22.     type: "category",
    23.     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    24.   },
    25.   yAxis: {
    26.     type: "value",
    27.   },
    28.   series: [
    29.     {
    30.       name:'1',//对应图例
    31.       data: [150, 230, 224, 218, 135, 147, 260],
    32.       type: "line", //折线图
    33.     },
    34.     {
    35.       name:'2',
    36.       data: [50, 30, 24, 18, 35, 147, 260],
    37.       type: "line", //折线图
    38.     },
    39.     {
    40.       name:'3',
    41.       data: [150, 230, 224, 218, 135, 147, 260],
    42.       type: "bar", //柱状图
    43.     },
    44.   ],
    45. };

    五、地图

    1、前期准备

    （1）获取JSON格式地图信息文档

    DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。icon-default.png?t=N7T8http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.29b915ddWQjcfk（2）下载需要的数据，小编以福建省为例子

    （3）放入静态文件夹assets中

    （4）引入、注册地图

    2.  
    3. <script>
    4. import * as echarts from 'echarts';
    5. // 引入
    6. import map from "@/assets/福建省.json";
    7.  
    8. export default {
    9.   name: 'ThreeTwoMapView',
    10.  
    11.   data() {
    12.     return {
    13.       
    14.     };
    15.   },
    16.  
    17.   mounted() {
    18.     
    19.   },
    20.  
    21.   methods: {
    22.     init(){
    23.       const dom = document.getElementById('MapPage')
    24.       this.chart = echarts.init(dom)
    25.       // 注册地图
    26.       echarts.registerMap('Fujian',map)
    27.       // 设置配置项
    28.       this.setOption()
    29.     },
    30.     setOption(){
    31.       const option = {
    32.  
    33.       }
    34.  
    35.       option && this.chart.setOption(option);
    36.     }
    37.   },
    38. };
    39. script>
    40.  
    41. <style lang="scss" scoped>
    42. #MapPage{
    43.   width: 500px;
    44.   height: 500px;
    45. }
    46. style>

    2、设置配置项

    1. setOption(){
    2.   const option = {
    3.     series:[
    4.       {
    5.         name:'福建省',
    6.         type:"map",
    7.         map:'Fujian',
    8.       }
    9.     ]
    10.   }
    11.  
    12.   option && this.chart.setOption(option);
    13. }

    （1）roam鼠标拖拽缩放、偏移

    1. const option = {
    2.   series:[
    3.     {
    4.       name:'福建省',
    5.       type:"map",
    6.       map:'Fujian',
    7.       roam:true,
    8.     }
    9.   ]
    10. }

    （2）scaleLimit缩放限制

    1. const option = {
    2.   series: [
    3.     {
    4.       name: "福建省",
    5.       type: "map",
    6.       map: "Fujian",
    7.       roam: true,//是否可缩放、偏移
    8.       zoom:0.5,//初始缩放比例
    9.       scaleLimit:{//缩放限制
    10.         min:0.5,
    11.         max:10,
    12.       }
    13.     },
    14.   ],
    15. };

    （3）itemStyle图形样式

    1. const option = {
    2.   series: [
    3.     {
    4.       name: "福建省",
    5.       type: "map",
    6.       map: "Fujian",
    7.       roam: true,//是否可缩放、偏移
    8.       zoom:0.5,//初始缩放比例
    9.       scaleLimit:{//缩放限制
    10.         min:0.5,
    11.         max:10,
    12.       },
    13.       // 文本标签
    14.       label:{
    15.         show:true,
    16.         color:"#0000ff"
    17.       },
    18.       // 图形样式
    19.       itemStyle:{
    20.         areaColor:"#00ffff",//区域颜色
    21.         borderColor:'black',//描边颜色
    22.         shadowColor:'rgba(0,0,0,0.5)',//阴影颜色
    23.         shadowBlur:10,//阴影的模糊大小
    24.       }
    25.     },
    26.   ],
    27. };

    （4）emphasis高亮

    1. const option = {
    2.   series: [
    3.     {
    4.       name: "福建省",
    5.       type: "map",
    6.       map: "Fujian",
    7.       roam: true,//是否可缩放、偏移
    8.       zoom:0.5,//初始缩放比例
    9.       scaleLimit:{//缩放限制
    10.         min:0.5,
    11.         max:10,
    12.       },
    13.       // 文本标签
    14.       label:{
    15.         show:true,
    16.         color:"#0000ff"
    17.       },
    18.       // 图形样式
    19.       itemStyle:{
    20.         areaColor:"#00ffff",//区域颜色
    21.         borderColor:'black',//描边颜色
    22.         shadowColor:'rgba(255,0,0,0.5)',//阴影颜色
    23.         shadowBlur:10,//阴影的模糊大小
    24.       },
    25.       // 高亮
    26.       emphasis:{
    27.         label:{
    28.           show:true,
    29.           color:'#fff'
    30.         },
    31.         // 图形样式
    32.         itemStyle:{
    33.           areaColor:"#000",//区域颜色
    34.           borderColor:'black',//描边颜色
    35.         },
    36.       }
    37.     },
    38.   ],
    39. };

    （5）选中

    1. // 选中
    2. select:{
    3.   label:{
    4.     show:true,
    5.     color:'#fff'
    6.   },
    7.   // 图形样式
    8.   itemStyle:{
    9.     areaColor:"#0f0",//区域颜色
    10.     borderColor:'black',//描边颜色
    11.   },
    12. },

    3、点击事件

    1. init() {
    2.   const dom = document.getElementById("MapPage");
    3.   this.chart = echarts.init(dom);
    4.   // 注册地图
    5.   echarts.registerMap("Fujian", map);
    6.   // 点击
    7.   this.chart.on("click", (params) => {
    8.     console.log(params);
    9.   });
    10.   // 设置配置项
    11.   this.setOption();
    12. },

    六、动态数据渲染

    1、问题提出

    当data数据是动态的，在created的dom还没有渲染时，异步获取数据，发现图并不能绘制成功

    1. export default {
    2.   name: "LineView",
    3.  
    4.   data() {
    5.     return {
    6.       arr:[],//动态数据
    7.     };
    8.   },
    9.  
    10.   created(){
    11.     // dom还没有渲染
    12.     this.arrApi()
    13.   },
    14.  
    15.   mounted() {
    16.     this.init();
    17.   }, 
    18.  
    19.   methods: {
    20.     init() {
    21.       // 获取dom元素
    22.       var dom = document.getElementById("line");
    23.       // 初始化表
    24.       this.chart = echarts.init(dom);
    25.       // 设置配置项
    26.       this.setOptions();
    27.     },
    28.     setOptions() {
    29.       const option = {
    30.         title: {
    31.           text: "统计图",
    32.           link: "https://www.baidu.com/", //跳转路径
    33.           target: "blank", //在新页面打开
    34.           textStyle: {
    35.             color: "blue",
    36.             fontSize: "26",
    37.             fontWeight: "bold",
    38.           },
    39.           left: "center",
    40.         },
    41.         legend: {
    42.           data: ["1", "2", "3"], //对应的系列
    43.           left: "right",
    44.         },
    45.         tooltip: {
    46.           show: true, //展示
    47.           trigger: "axis", //同时显示三种数据，方便对比
    48.         },
    49.         xAxis: {
    50.           type: "category",
    51.           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    52.         },
    53.         yAxis: {
    54.           type: "value",
    55.         },
    56.         series: [
    57.           {
    58.             name: "1", //对应图例
    59.             data: this.arr,
    60.             type: "line", //折线图
    61.           },
    62.         ],
    63.       };
    64.  
    65.       option && this.chart.setOption(option);
    66.     },
    67.     // 模拟异步请求获取数据
    68.     arrApi(){
    69.       setTimeout(()=>{
    70.         this.arr = [50, 30, 24, 18, 35, 147, 260]
    71.       })
    72.     }
    73.   },
    74. };

    2、解决方案

    监听数据变化时，再次绘制即可

    1. // 监听数据变化
    2. watch:{
    3.   arr:{
    4.     handler(newV,oldV){
    5.       console.log(newV,oldV);
    6.       this.setOptions()//再次调用配置项
    7.     }
    8.   }
    9. },

  • 相关阅读:
    Oracle Audit Vault部署
    【React】redux和React-redux
    前端二倍图
    Linux/shell命令
    【python】基础语法
    Spring Security 6.x 系列【68】 授权篇之基于注解 & 缓存的访问控制方案
    day01-从一个基础的socket服务说起
    JetBrains Fleet初体验，如何运行一个java项目
    关于 SAP UI5 所有控件的共同祖先 - sap.ui.base.ManagedObject
    6234. 最小公倍数为 K 的子数组数目
  • 原文地址：https://blog.csdn.net/qq_51478745/article/details/132080228