欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Echarts 使用方法以及部分配置介绍

程序员文章站 2022-03-10 16:16:43
...

Echarts官网

官方文档,点击进入

方式一
1.1运用在普通单页面当中


<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" >

</script>

引入此文件 进行使用
1.2 需设置盒子容器

<div id="chart" style="width:800px;height:800px;"></div>

1.3 获取盒子ID

var myChart = echarts.init(document.getElementById("chart"))

1.4 引入所需要使用的可视化数据

 tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function(p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      }
    },
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: "年龄分布",
        type: "pie",
        center: ["50%", "42%"],
        radius: ["40%", "60%"],
        color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
          "#06b4ab",
          "#06c8ab",
          "#06dcab",
          "#06f0ab"
        ],
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 1, name: "0岁以下" },
          { value: 4, name: "20-29岁" },
          { value: 2, name: "30-39岁" },
          { value: 2, name: "40-49岁" },
          { value: 1, name: "50岁以上" }
        ]
      }
    ]

1.5 绑定数据

myChart.setOption(option);

总结:
1 下载并引入echart.js文件
2 准备具备大小的盒子容器
3 初始化实例对象
4 指定配置项和数据
5 将配置项设置给echarts实例对象

部分配置

  • series

1 系列列表。每个系列通过 type 决定自己的图表类型
2 图标数据,指定什么类型的图标,可以多个图表重叠。

  • xAxis:直角坐标系 grid 中的 x 轴
    boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
  • yAxis:直角坐标系 grid 中的 y 轴
  • grid:直角坐标系内绘图网格
  • title:标题组件
  • tooltip:提示框组件
  • legend:图例组件
  • color:调色盘颜色列表

总结 : 好用好评!