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

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} 
{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：调色盘颜色列表

总结 ： 好用好评！