数据可视化（svg和echarts）基础笔记

最新推荐文章于 2024-04-10 15:20:04 发布

白小水i

最新推荐文章于 2024-04-10 15:20:04 发布

阅读量499

点赞数

文章标签： echarts 笔记前端 javascript

本文链接：https://blog.csdn.net/m0_62508027/article/details/132011556

版权

一、svg 学习

svg 双闭合标签，默认宽度与高度 300 * 150，绘制图形务必在 svg 标签内部，可以通过样式设置宽度和高度。

基本使用
- line 标签，创建一条直线
- polyline ，创建折线 默认填充
- rect, 创建矩形
- circle , 创建圆
- ellipse, 创建椭圆
- polygon, 创建多边形 默认填充
- path, 创建任意图形（通过指定点以及点和点之间的线） 默认填充
  注意： 属性 fill-opacity 可以设置填充颜色的透明度，fill 属性可以设置填充颜色，stroke 可以设置绘制线的颜色。
详细使用：

<!-- svg双闭合标签：默认宽度与高度300 * 150  svg绘制图形务必在svg标签内部使用绘制图形 -->
<svg class="box">
        <!-- x1 y1第一个点的坐标  x2 y2 第二个点的坐标 -->
        <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
        <line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
        <!-- 绘制折线:可以多个点，多个点的时候，最好带有逗号 -->
        <polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>
        <!-- 绘制矩形 -->
        <!-- fill属性：设置填充颜色的  fill-opacity设置填充颜色的透明度  stroke：线的颜色 -->
        <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
        <!-- 绘制圆形 -->
        <circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
        <!-- 绘制圆形|椭圆 -->
        <ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black;"></ellipse>
        <!-- 多边行 -->
        <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0" />
        <!-- 绘制任意图形 -->
        <path fill-opacity="0" stroke="skyblue" d="
  M 10  10
  L 20 400
  L 30 120
  L 40 66
  L 50 99
  L 60 120
  L 70 99
  Z
"></path>
</svg>

二、ECharts 学习

1. 一个页面显示多个图表

注意: series中的配置项 type 的值: bar 柱状图, line 折线图, pie 饼图, scatter 散点图(散点图的series配置项中的data,是二维数组)

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
<script>
  let box1 = document.querySelector('.box1');
  let box2 = document.querySelector('.box2');
  var myChart1 = echarts.init(box1);
  var myChart2 = echarts.init(box2);
  var options1 = {
    // 图表的标题
    title: {
      text: '数据可视化',
      subtext: '数据可视化学习',
      // 主标题位置
      left: 'center',
      // 主标题颜色
      textStyle: {
        color: 'blue'
      },
    },
    // x轴
    xAxis: {
      // 数据
      data: ['衣服', '直播', '游戏', '电影'],
    },
    // y轴
    yAxis: {
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      }
    },
    // 图表类型  数据设置
    series: [
      {
        type: 'bar',
        data: [10, 20, 30, 40],
      }
    ]
  }
  var options2 = {
    title: {
      text: '折线图',
      subtext: '数据可视化学习折线图',
      // 设置子标题颜色
      subtextStyle: {
        color: 'green'
      },
      // 主标题位置
      left: 'center',
      // 主标题颜色
      textStyle: {
        color: 'red'
      },
    },
    xAxis: {
      data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
    },
    yAxis: {

    },
    series: [
      {
        type: 'line',
        data: [10, 20, 15, 40, 50, 38, 100],
      }
    ]
  }
  myChart1.setOption(options1);
  myChart2.setOption(options2);
</script>

2. 一个容器内显示多个图表

在series配置项里面,写多个对象,每个对象对应一个图表

<script>
  let div = document.querySelector('div');
  var myChart = echarts.init(div);
  var options = {
    title: {
      text: '数据可视化',
      subtext: 'echarts基本使用',
      textStyle: {
        color: 'green',
      },
      left: 'center',
    },
    xAxis: {
      data: ['衣服', '直播', '游戏', '电影'],
    },
    yAxis: {
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      }
    },
    series: [
      // 柱状图
      {
        type: 'bar',
        data: [10, 20, 30, 40],
        color: 'red',
      },
      // 折线图
      {
        type: 'line',
        data: [10, 20, 30, 40],
      },
      // 饼图
      {
        type: 'pie',
        // 饼图可以显示文字,data的写法如下
        data: [
          {
            value: 10,
            name: 'x',
          },
          {
            value: 20,
            name: 'y',
          },
          {
            value: 30,
            name: 'z',
          },
          {
            value: 40,
            name: 'w',
          },
        ],
        // 可以设置饼图整体的宽度和高度
        width: 150,
        height: 150,
        // 可以设置饼图的位置
        left: 100,
        top: 50,
        // 由于宽度和高度可能设置过小 导致文字不显示,因此要设置饼图合适的半径
        radius: 25,
      }
    ]
  };
  myChart.setOption(options);
</script>

3. ECharts 新特性: dataset

数据集(dataset)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射.这一特性能够将逻辑和数据分离,带来更好的复用,并易于理解.
准备一个二维数组data作为数据集,在配置项中写 dataset:{source:data},在series中的每一个对象中加上配置项encode:{y:index} 其中index表示对应data中第几列索引值为数据,注意在这里饼图中对应的配置项是 encode:{itemName:index,value:index}

<script>
  let div = document.querySelector('div');
  var myChart = echarts.init(div);
  // 数据集：二维数组
  let data = [
    ["衣服", 10, 22, 'x', 13],
    ["直播", 12, 55, 'y', 63],
    ["游戏", 16, 44, 'z', 53],
    ["电影", 19, 32, 'w', 73],
  ];
  var options = {
    // 设置字符集
    dataset: {
      source: data,
    },
    title: {
      text: '数据可视化',
      subtext: 'echarts基本使用',
      textStyle: {
        color: 'green',
      },
      left: 'center',
    },
    xAxis: {
      data: ['衣服', '直播', '游戏', '电影'],
    },
    yAxis: {
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      }
    },
    series: [
      // 柱状图
      {
        type: 'bar',
        // data: [10, 20, 30, 40],
        color: 'red',
        encode: {
          y: 1, // 代表使用的是字符集当中索引值为 1 的数据 ，10 12 16 19
        },
      },
      // 折线图
      {
        type: 'line',
        // data: [10, 20, 30, 40],
        encode: {
          y: 2, // 代表使用的是字符集当中索引值为 1 的数据 ，10 12 16 19
        },
      },
      // 饼图
      {
        type: 'pie',
        // 饼图可以显示文字,data的写法如下
        // data: [
        //   {
        //     value: 10,
        //     name: 'x',
        //   },
        //   {
        //     value: 20,
        //     name: 'y',
        //   },
        //   {
        //     value: 30,
        //     name: 'z',
        //   },
        //   {
        //     value: 40,
        //     name: 'w',
        //   },
        // ],
        // 可以设置饼图整体的宽度和高度
        width: 150,
        height: 150,
        // 可以设置饼图的位置
        left: 100,
        top: 50,
        // 由于宽度和高度可能设置过小 导致文字不显示,因此要设置饼图合适的半径
        radius: 25,
        encode: {
          // 饼图旁边的文字
          itemName: 3,
          value: 4,
        },
      }
    ]
  };
  myChart.setOption(options);
</script>

白小水i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数据可视化（svg和echarts）基础笔记

准备一个二维数组data作为数据集,在配置项中写 dataset:{source:data},在series中的每一个对象中加上配置项encode:{y:index} 其中index表示对应data中第几列索引值为数据,注意在这里饼图中对应的配置项是 encode:{itemName:index,value:index}数据集(dataset)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射.这一特性能够将逻辑和数据分离,带来更好的复用,并易于理解.
复制链接

扫一扫