ECharts的基本使用

最新推荐文章于 2024-05-28 11:11:34 发布
最新推荐文章于 2024-05-28 11:11:34 发布
阅读量213 收藏
点赞数 1
分类专栏： vue2 文章标签： echarts 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51478745/article/details/132080228
版权

目录

一、使用前提

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、导入

//5.0以上版本
import * as echarts from 'echarts'
//5.0以下
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的定义

const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
};

（2）option的作用

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

4、init()函数调用

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

mounted() {
  this.init()
},

5、整合完整代码

<template>
  <div>
    <div id="line"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "LineView",

  data() {
    return {};
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      // 获取dom元素
      var dom = document.getElementById("line");
      // 初始化表
      this.chart = echarts.init(dom);
      // 设置配置项
      this.setOptions();
    },
    setOptions() {
      const option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
#line {
  width: 500px;
  height: 500px;
}
</style>

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

1、引入

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

2、注册

components:{
    lineView
},

3、显示

<div class="index">
    <!-- 折线图 -->
    <div class="line">
    <lineView></lineView>
    </div>
</div>
.index {
  width: 100%;
  height: 100%;
  .line {
    width: 500px;
    height: 500px;
  }
}

四、数据操作

1、series系列

（1）折线图、柱状图

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],//数据
    type: "line",//折线图
    smooth: true,//平滑
  },
  {
    data: [50, 30, 24, 18, 35, 147, 260],
    type: "line",//折线图
  },
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: "bar",//柱状图
  },
],

（2）饼图

IndexView.vue

<template>
  <div>
    <div class="index">
      <!-- 折线图 -->
      <div class="line">
        <lineView></lineView>
      </div>
      <!-- 饼图 -->
      <div class="pie">
        <pieView></pieView>
      </div>
    </div>
  </div>
</template>

<script>
import lineView from "./echarts/lineView.vue";
import pieView from "./echarts/PieView.vue";

export default {
  name: "IndexView",

  components: {
    lineView,
    pieView,
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  .line {
    width: 500px;
    height: 500px;
  }
  .pie {
    width: 500px;
    height: 500px;
  }
}
</style>

PieView.vue

<template>
  <div>
    <div id="PiePage"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PieView",

  data() {
    return {};
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      // 获取dom元素
      var dom = document.getElementById("PiePage");
      // 初始化表
      this.chart = echarts.init(dom);
      // 设置配置项
      this.setOptions();
    },
    setOptions() {
      const option = {
        title: {
          text: "饼状图",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: '50%', //饼状大小
            data: [
              //数据
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              //高亮状态
              itemStyle: {
                //样式
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
#PiePage {
  width: 500px;
  height: 500px;
}
</style>

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

series: [
  {
    name: "Access From",
    type: "pie",
    radius: ['20%','50%'],//[内半径, 外半径]
    data: [
      { value: 1048, name: "Search Engine" },
      { value: 735, name: "Direct" },
      { value: 580, name: "Email" },
      { value: 484, name: "Union Ads" },
      { value: 300, name: "Video Ads" },
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
    },
  },
],

②文本标签

const option = {
  title: {
    text: "饼状图",
    subtext: "Fake Data",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["20%", "50%"], //[内半径, 外半径]
      data: [
        //数据
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      label:{
        show:true,
        position:'center'
      },
      emphasis: {
        //高亮状态
        itemStyle: {
          //样式
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

③emphasis高亮状态

const option = {
  title: {
    text: "饼状图",
    subtext: "Fake Data",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["20%", "50%"], //[内半径, 外半径]
      data: [
        //数据
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      label:{
        show:false,
        position:'center'
      },
      //高亮状态
      emphasis: {
        //文字样式
        label:{
          show:true,
          fontSize:20,
          fontWeight:'bold'
        },
        //样式
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

2、title标题

const option = {
  title:{
    text:'统计图',
    link:'https://www.baidu.com/',//跳转路径
    target:'blank',//在新页面打开
    textStyle:{
      color:"blue",
      fontSize:'26',
      fontWeight:"bold",
    },
    left:'center',
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line", //折线图
    },
    {
      data: [50, 30, 24, 18, 35, 147, 260],
      type: "line", //折线图
    },
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "bar", //柱状图
    },
  ],
};

3、legend图例

const option = {
  title:{
    text:'统计图',
    link:'https://www.baidu.com/',//跳转路径
    target:'blank',//在新页面打开
    textStyle:{
      color:"blue",
      fontSize:'26',
      fontWeight:"bold",
    },
    left:'center',
  },
  legend: {
    data: ['1', '2', '3'],//对应的系列
    left:'right',
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name:'1',//对应图例
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line", //折线图
    },
    {
      name:'2',
      data: [50, 30, 24, 18, 35, 147, 260],
      type: "line", //折线图
    },
    {
      name:'3',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "bar", //柱状图
    },
  ],
};

4、tooltip提示框

const option = {
  title:{
    text:'统计图',
    link:'https://www.baidu.com/',//跳转路径
    target:'blank',//在新页面打开
    textStyle:{
      color:"blue",
      fontSize:'26',
      fontWeight:"bold",
    },
    left:'center',
  },
  legend: {
    data: ['1', '2', '3'],//对应的系列
    left:'right',
  },
  tooltip:{
    show:true,//展示
    trigger:'axis',//同时显示三种数据，方便对比
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name:'1',//对应图例
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line", //折线图
    },
    {
      name:'2',
      data: [50, 30, 24, 18, 35, 147, 260],
      type: "line", //折线图
    },
    {
      name:'3',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "bar", //柱状图
    },
  ],
};

五、地图

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）引入、注册地图

<template>
  <div>
    <div id="MapPage"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入
import map from "@/assets/福建省.json";

export default {
  name: 'ThreeTwoMapView',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    init(){
      const dom = document.getElementById('MapPage')
      this.chart = echarts.init(dom)
      // 注册地图
      echarts.registerMap('Fujian',map)
      // 设置配置项
      this.setOption()
    },
    setOption(){
      const option = {

      }

      option && this.chart.setOption(option);
    }
  },
};
</script>

<style lang="scss" scoped>
#MapPage{
  width: 500px;
  height: 500px;
}
</style>

2、设置配置项

setOption(){
  const option = {
    series:[
      {
        name:'福建省',
        type:"map",
        map:'Fujian',
      }
    ]
  }

  option && this.chart.setOption(option);
}

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

const option = {
  series:[
    {
      name:'福建省',
      type:"map",
      map:'Fujian',
      roam:true,
    }
  ]
}

（2）scaleLimit缩放限制

const option = {
  series: [
    {
      name: "福建省",
      type: "map",
      map: "Fujian",
      roam: true,//是否可缩放、偏移
      zoom:0.5,//初始缩放比例
      scaleLimit:{//缩放限制
        min:0.5,
        max:10,
      }
    },
  ],
};

（3）itemStyle图形样式

const option = {
  series: [
    {
      name: "福建省",
      type: "map",
      map: "Fujian",
      roam: true,//是否可缩放、偏移
      zoom:0.5,//初始缩放比例
      scaleLimit:{//缩放限制
        min:0.5,
        max:10,
      },
      // 文本标签
      label:{
        show:true,
        color:"#0000ff"
      },
      // 图形样式
      itemStyle:{
        areaColor:"#00ffff",//区域颜色
        borderColor:'black',//描边颜色
        shadowColor:'rgba(0,0,0,0.5)',//阴影颜色
        shadowBlur:10,//阴影的模糊大小
      }
    },
  ],
};

（4）emphasis高亮

const option = {
  series: [
    {
      name: "福建省",
      type: "map",
      map: "Fujian",
      roam: true,//是否可缩放、偏移
      zoom:0.5,//初始缩放比例
      scaleLimit:{//缩放限制
        min:0.5,
        max:10,
      },
      // 文本标签
      label:{
        show:true,
        color:"#0000ff"
      },
      // 图形样式
      itemStyle:{
        areaColor:"#00ffff",//区域颜色
        borderColor:'black',//描边颜色
        shadowColor:'rgba(255,0,0,0.5)',//阴影颜色
        shadowBlur:10,//阴影的模糊大小
      },
      // 高亮
      emphasis:{
        label:{
          show:true,
          color:'#fff'
        },
        // 图形样式
        itemStyle:{
          areaColor:"#000",//区域颜色
          borderColor:'black',//描边颜色
        },
      }
    },
  ],
};

（5）选中

// 选中
select:{
  label:{
    show:true,
    color:'#fff'
  },
  // 图形样式
  itemStyle:{
    areaColor:"#0f0",//区域颜色
    borderColor:'black',//描边颜色
  },
},

3、点击事件

init() {
  const dom = document.getElementById("MapPage");
  this.chart = echarts.init(dom);
  // 注册地图
  echarts.registerMap("Fujian", map);
  // 点击
  this.chart.on("click", (params) => {
    console.log(params);
  });
  // 设置配置项
  this.setOption();
},

六、动态数据渲染

1、问题提出

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

export default {
  name: "LineView",

  data() {
    return {
      arr:[],//动态数据
    };
  },

  created(){
    // dom还没有渲染
    this.arrApi()
  },

  mounted() {
    this.init();
  }, 

  methods: {
    init() {
      // 获取dom元素
      var dom = document.getElementById("line");
      // 初始化表
      this.chart = echarts.init(dom);
      // 设置配置项
      this.setOptions();
    },
    setOptions() {
      const option = {
        title: {
          text: "统计图",
          link: "https://www.baidu.com/", //跳转路径
          target: "blank", //在新页面打开
          textStyle: {
            color: "blue",
            fontSize: "26",
            fontWeight: "bold",
          },
          left: "center",
        },
        legend: {
          data: ["1", "2", "3"], //对应的系列
          left: "right",
        },
        tooltip: {
          show: true, //展示
          trigger: "axis", //同时显示三种数据，方便对比
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "1", //对应图例
            data: this.arr,
            type: "line", //折线图
          },
        ],
      };

      option && this.chart.setOption(option);
    },
    // 模拟异步请求获取数据
    arrApi(){
      setTimeout(()=>{
        this.arr = [50, 30, 24, 18, 35, 147, 260]
      })
    }
  },
};

2、解决方案

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

// 监听数据变化
watch:{
  arr:{
    handler(newV,oldV){
      console.log(newV,oldV);
      this.setOptions()//再次调用配置项
    }
  }
},

五秒法则
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Echarts的基本使用
08-21
快速的了解Echars图表的常用API，急速上手构建可视化工具，有例子有md笔记，量少成本低
echarts的基本使用以及代码演示
05-06
**ECharts 基本使用及与 Vue.js 集成指南** ECharts 是一个由百度开发的开源数据可视化库，支持丰富的图表类型，如折线图、柱状图、饼图、散点图等。它具有良好的交互性和灵活性，可以方便地在 Web 页面上展示复杂...
echarts怎么使用（最最最最简单版）（本质canvas）
weixin_33767813的博客
06-20 1077
echarts怎么使用（最最最最简单版）（本质canvas） 一、总结 一句话总结：外部扩展插件肯定要写js啊，不然数据怎么进去，不然宽高怎么设置。本质都是canvas嵌套在页面上，比如div中。   1、echarts怎么使用？ 引入js，指定控件，编写js 2、怎么让外部插件变得非常容易？ 页面源代码和官方教程     二、echarts怎么使用（最最最最简单版） ...
echarts(7大基础图表)的使用
最新发布
qq_44930306的博客
05-28 1839
echarts基础应用
echarts基本使用
qq_54434336的博客
03-01 332
数据可视化 什么是数据可视化？ 可视化的实现方式： 1.报表类 excel、水晶报表 2.商业智能BI Microsoft BI、Power-BI 3.编码类 ECharts.js、D3.js ECharts的基本使用 1.引入echarts.js文件 <script src="lib/echarts.min.js"></script> 2.准备一个呈现图表的盒子 <div style="width: 600px;height: 400px"..
ECharts基本使用
weixin_45733659的博客
10-11 148
ECharts的基本使用 1.需要引用的js <script src="../../libs/jquery.min.js"></script> <script src="../../assets/js/echarts/echarts.min.js"></script> 2.创建图形容器 <div id="current_A" style...
详解ECharts使用心得总结
09-01
ECharts通常会依赖于ZRender，这是一个独立的图形渲染引擎，用于处理基本的矢量图形绘制。下载ECharts时，最好同时下载ZRender以确保所有必要的组件都已包含。ECharts的下载链接可以在其官网找到，而ZRender的下载...
ECharts 使用demo
05-24
2. **ECharts基本使用步骤**： - 引入ECharts库：在HTML文件中通过`<script>`标签引入ECharts的JavaScript文件。 - 准备容器：创建一个用于展示图表的DOM元素，例如`<div id="main"></div>`。 - 初始化ECharts...
vue使用 echarts
06-09
在本文中，我们将深入探讨如何在Vue.js框架中有效地使用ECharts数据可视化库。Vue.js是一个流行的前端JavaScript框架，以其轻量级、易用性和组件化特性受到开发者的喜爱。而ECharts则是一款由百度开源的数据可视化库...
Echarts基本使用
vive921的博客
01-10 148
Echarts基本使用 友情提示 需要先写div标签 然后应用echarts &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;123&am
ECharts 基本使用指南
Charge8的博客
02-21 2318
官网下载及文档：https://echarts.baidu.com/download.html            一、入门使用： 1、引入 js 文件： &lt;script src="static/plugins/ECharts-4.2.1/echarts.js"&gt;&lt;/script&gt; 2、 准备一个具备高宽的 DOM 容器： &lt;div id="demo...
echarts的简单使用
s_9527_s的博客
02-25 4848
echarts官网Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/index.html 一、echarts的引入 1、cdn引入 https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js 2、npm引入 npm install echar
Echarts的使用
zimistan0997的博客
02-10 237
Echarts的使用 记录自己第一次在vue中使用Echarts。 下载 在vue中使用Echarts，需要先用npm下载Echarts： npm install echarts 引入 下载好之后在项目中引入，我推荐局部引入，Echarts在最新的版本中，需要用以下方式引入。 App.vue: import * as echarts from "echarts" 使用 使用首先需要创建一个宽高固定的DOM容器。 App.vue: <div id="myCharts" style="width:40
echarts怎么使用_「源码学习」适用于 Vue3 的 ECharts 包装组件
weixin_39699746的博客
11-27 102
距离 Vue3 发布已经有近一周的时间，不知道大家源码都学习的怎么样了呢？今天 Gitee 为开发者们推荐一个新的学习资源，就是下面要介绍的这个同时适用于 Vue2 和 Vue3 的 EChatrts 包装组件，希望能对大家学习 Vue3 有所帮助。项目名称：echarts-for-vue项目作者：范围兄开源许可协议：Apache-2.0项目地址：https://gitee.com/ambit/e...
Echarts的简单使用
热门推荐
qq_32810963的博客
11-13 1万+
现在，数据可视化已经成为了工作中不可或缺的一部分，本文将简单介绍Echarts的使用以及一些属性的含义 1.要使用Echarts首先就要引入echarts文件 <script src="echarts.js"></script> echarts.js文件可在echarts的官方中文网站下载 Apache ECharts 2.在Echarts的官方中文网站中选择一个你想要绘制的图形 这里我们选择折线图进行绘制 3.接下来我们了解一下左边代码的具体含义 ...
怎么使用echarts
tt010175的博客
10-18 1748
浏览器搜索，echarts 进入echarts官网。 选择文档中的教程。 点击官网下载界面，选择合适的下载版本。 安装在自己的文件夹中。在程序中，改成自己的路径。 script src="echarts.common.min.js">script> 编写程序 body> div id="main" style="width
5 分钟学会ECharts如何使用
HTML网页设计
08-15 1662
你可以通过以下几种方式获取 Apache EChartsTM。从获取官方源码包后构建。在 ECharts 的获取。通过 npm 获取 echarts，，详见“在”通过等 CDN 引入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五秒法则

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值