快速上手用echarts实现可视化

db_wdd_2098

已于 2023-06-09 00:46:42 修改

阅读量278

点赞数 2

文章标签： echarts 前端 javascript

于 2023-06-09 00:40:34 首次发布

本文链接：https://blog.csdn.net/wangdandan_/article/details/131118565

版权

文章目录

1.什么是Echarts
2.快速用Echarts做图
3.Echarts做饼图
- 饼图的操作和极轴坐标一样，其中<body></body>里可以自定义高度和宽度
- 饼图中Option常用配置项

1.什么是Echarts

Echarts是一个开源的可视化库，支持多图表、组件的联动和混搭展现。ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

2.快速用Echarts做图

我们在echarts3可以根据需要在下载项下直接根据所需的功能构架类库，使用时只要导入一个echarts.min.js文件就可以。

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
  <title>快速入门</title>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>

首先我们在引入echarts网址

在echarts3中只需要在开头加一句 , 接下去就可以了。

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <div id = "chart" style="width:900;height: 500px;"></div>
  var myChart = echarts.init(document.getElementById('chart'));
  var option;

设置一下图片占比大小、初始化Echarts、配置项

var myChart = echarts.init(document.getElementById('chart'));
  var option;
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    const data = [];
    for (let i = 0; i <= 100; i++) {
      let theta = (i / 100) * 360;
      let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
      data.push([r, theta]);
    }
    option = {
      title: {
        text: '极轴爱心',
        backgroundColor:'skyblue',
        left:'center',
        textStyle:{
          color:'pink',
          fontSize:50
        }

      },

Option常用配置项

定义配置项标题，背景颜色，字体大小等

option = {
      title: {
        text: '极轴爱心',
        backgroundColor:'skyblue',
        left:'center',
        textStyle:{
          color:'pink',
          fontSize:50
        }

      },
      
      legend: {
        data: ['line']
        
      },
     

      
      polar: {
        radius:'75%',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      angleAxis: {
        type: 'value',
        startAngle: 0
      },
      radiusAxis: {},
      series: [
        {
          coordinateSystem: 'polar',
          name: 'line',
          type: 'line',
          data: data
        }
      ]
    };

        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }

为了让图片更加丰富、精美，所以再添加一些配置项如：父元素的内(legend)、角度（radius）、展示鼠标 hover 时的提示信息（tooltip）等参数。

将配置项对象配置给echarts图形对象

在这里插入图片描述

最终的效果图

3.Echarts做饼图

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
  <title>菜单</title>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <div id="chart" style="width: 900;height:500px;"></div>
  <script>
    var myCharts = echarts.init(document.getElementById('chart'));
    var option;

饼图的操作和极轴坐标一样，其中里可以自定义高度和宽度

 <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

引入Echarts库，可以是从网上的资源，也可以是本地的资源

饼图中Option常用配置项

  option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

在这里插入图片描述

菜单数据

data: [

    { value: 1048, name: '小龙虾' },

    { value: 735, name: '啤酒鱼' },

    { value: 580, name: '麻辣香锅' },

    { value: 484, name: '麻辣兔头' },

    { value: 300, name: '爆炒空心菜' }

  ]

完善代码

运行代码，就如图所示，我们增加一些新的参数，让画面更加的美观

option = {   //设置标题样式
  title:{
    text:'菜单',
    left:'center',
    textStyle:{
      color:'pink',
      fontSize:50
    },
  },
backgroundColor:'#FFFFE0',//设置背景颜色

在这里插入图片描述

在最终的效果图中新增加了标题，设置了居中，颜色和大小
backgroundColor 背景色
默认无背景transparent；颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式。