echarts 折线属性设置

最新推荐文章于 2024-07-30 10:30:19 发布

maozuai~zi

最新推荐文章于 2024-07-30 10:30:19 发布

阅读量1.3k

点赞数

分类专栏： echart 文章标签： echarts

本文链接：https://blog.csdn.net/qq_36557846/article/details/121120183

版权

echart 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

折线

在这里插入图片描述

折线点样式

‘circle’ | ‘rectangle’ | ‘triangle’ | ‘diamond’ |
‘emptyCircle’ | ‘emptyRectangle’ | ‘emptyTriangle’ | ‘emptyDiamond’
另外，还支持五种更特别的标志图形’heart’（心形）、‘droplet’（水滴）、‘pin’（标注）、‘arrow’（箭头）和’star’（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，‘star’ + n（n>=3)可变化出N角星，如指定为’star6’则可以显示6角星
自1.3.5起支持symbol为自定义图片，格式为’image://’ + ‘图片路径’，如’image://…/asset/ico/favicon.png’

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      smooth: true,
      name: "温度",//鼠标放在折线点上显示的名称
      type: "line",//折线图
      symbol: 'circle', //折线点设置：默认为空心，circle为实心点，
      symbolSize: 10,   //折线点的大小，有时候折线点太小了看不到这个点，把折线点设置大一点就能看到
      itemStyle: {
         normal: {
           color: "#386db3",//折线点的颜色
           lineStyle: {
           color: "#386db3"//折线的颜色
          }
        }
      }
    }
  ]
}