echarts图标

1总的属性

1，title:标题组件
2.tooltip:提示框组件
tooltip: {
trigger: ‘axis’ // 触发类型。‘axis’,坐标轴触发；‘item’,数据项图形触发；
},
3.legend:图例组件： 里面放的是data
4.grid:工具栏
5.grid:网格区域
grid: {
left: ‘3%’, // 网格距离盒子左侧的距离。可以是具体的像素值，也可以是百分比
right: ‘4%’,
bottom: ‘3%’,
containLabel: false// 是否显示坐标轴的刻度标签。当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。
},
6.xAxis:直角坐标系X轴。
xAxis: {
type: ‘category’, // 坐标轴类型。‘category’ 类目轴，必须通过 data 设置类目数据。
data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’], // 坐标轴类目数据（刻度文字）
boundaryGap: false //坐标轴两边留白策略。类目轴中 boundaryGap 可以配置为 true 和 false。
},
7.yAxis:直角坐标系y轴
8.color:颜色
9.series:在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。
一张图表可以由多个图组成，所以series这个配置项的值为数组，数组中的每个元素为对象，每个对象最少有type和data两个属性。
series: [
{
name: ‘邮件营销’, // 名称，用于tooltip的显示，legend 的图例筛选 变化
type: ‘line’, // 类型 (什么类型的图表) 比如 line 是折线 bar 柱形等
data: [120, 132, 101, 134, 90, 230, 210] // 具体的数据项.值为数组。
},
{
name: ‘联盟广告’,
type: ‘line’,
data: [220, 182, 191, 234, 290, 330, 310]
}
]

边框图片

饼形图

option = {
   
    // 提示框组件
    tooltip: {
   
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表series系列图表名称  
      // b 代表series数据名称 data 里面的name    
      // c 代表series数据值 data 里面的value   
      // d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 控制图表
    series: [
      {
   
        // 图表名称
        name: '点位统计',
        // 图表类型
        type: 'pie',
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
        radius: ['10%', '70%'],
        // 图表中心位置 left 50%  top 50%  距离图表DOM容器
        center: ['50%', '50%'],
        // radius 半径模式，另外一种是 area 面积模式
        roseType: 'radius',
        **// 字体大小不要加单位**
        label: {
   
          fontSize: 10
        },
        **// 修饰引导线样式**
        labelLine: {
   
          // 连接到图形的线长度
          length: 6,
          // 连接到文字的线长度
          length2: 8
        }
        // 数据集 value 数据的值 name 数据的名称
        data: [
                {
   value:10, name:'rose1'},
                {
   value:5, name:'rose2'},
                {
   value:15, name:'rose3'},
                {
   value:25, name:'rose4'},
                {
   value:20, name:'rose5'},
                {
   value:35, name:'rose6'},
                {
   value:30, name:'rose7'},
                {
   value:40, name:'rose8'}