初识Echarts(一)

爱被打了一巴掌 2022-06-08 08:05 274阅读 0赞

1.  title: 图标的标题   
    show: 是否显示标题   
    text: 标题是什么   
    link: 点击标题往哪里跳转   
    target：链接打开方式   
    textStyle：\{   
    color: 标题颜色   
    …..字体 大小 等等
    
    \}   
    subtext: 副标题   
    sublink: 副标题点击的链接   
    subtextStyle:\{   
    设置副标题的颜色 字体 大小   
    \}   
    backgroundColor:背景色   
    ……
2.  legend 展示的数据是什么的标识 图例   
    show: 是否显示图例   
    …可设置间距 宽高   
    selectedMode: true默认开启 false不允许取消另一个 single单选 multiple多选   
    inactiveColor：图例关闭时候的颜色   
    selected: \{   
    设置打开时 哪个图例打开   
    \}   
    textStyle:\{   
    设置图例文字的格式 颜色 大小   
    \}   
    backgroundColor:文字的背景颜色
    
    data:\[name：系列名，icon：形状，textStyle:文字的样式\]
3.  grid 直角坐标系   
    show：是否显示   
    …..直角坐标系的一些设置
4.  xAxis: 横坐标横轴   
    show：是否显示横坐标   
    type: category 类目轴   
    name: 横坐标名称   
    nameLocation:横坐标位置   
    nameTextStyle:横坐标文字的格式
    
    axisLine:\{ 横轴   
    show:是否显示横轴   
    lineStyle:横轴的一些样式设置   
    \}
    
    axisTick:\{ 刻度   
    show:是否显示横轴刻度   
    inside:刻度的朝向   
    length:刻度的长度   
    lineStyle:刻度的一些样式设置   
    alignWithLabel: 刻度的位置 是在中央还是右侧   
    \}
    
    axisLabel:\{ 横坐标每一段的含义   
    show: 是否显示 横坐标每一段的含义   
    inside:文字的朝向   
    rotate:文字旋转的角度   
    splitLine:分割线   
    data：\[…,….,…\] 横坐标每一段的含义设置   
    ….一些样式的设置   
    \}
5.  yAxis: 纵坐标纵轴   
    show：是否显示纵坐标   
    type：value数值轴、category类目轴、time时间轴   
    name: 纵坐标的含义   
    nameLocation:含义的位置   
    data:\[…,….,纵坐标\]   
    ….一些设置
6.  tooltip：设置鼠标放在柱状图上的透明窗提示
    
    trigger：鼠标放上去触发的状态 item 主要用于散点图 饼图 axis主要用于折线图 柱状图   
    axisPointer:\{   
    type： line、shadow、cross 设置鼠标放上去的形状
    
        }
    
    ……一些设置
7.  toolbox ：工具栏 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。   
    show: 是否启用   
    orient：工具栏 是横的还是竖的   
    itemSize: 工具栏的大小   
    showTitle: true/false 鼠标放上去是否有提示   
    feature:\{   
    restore：true 数据项还原   
    saveAsImage: true 保存为图片   
    dataView: 数据视图 可编辑 动态更新   
    magicType：设置切换
    
    \}
8.  series ： 数据项   
    type：类型   
    name： 要和legend 对应上   
    stack: 堆叠排放   
    date:\[\]数据   
    marketPoint:\{ 标记点   
    symbol: 标记的形状   
    data:\{   
    name：这个标记的含义   
    type： 最大值 最小值 平均值   
    \}
    
    \}   
    marketLine：\{标记线   
    data:\{\}
    
        }
    
    其中可以内嵌 tooltip。