模板
源码
教程
插件
运营
工具
导航 | 导航 | 抖音 | enewsshopdd
  • 帝国cms模板
  • 织梦cms模板
  • discuz模板
  • ecshop模板
  • phpcms模板
  • wordpress模板
  • 苹果cms模板
  • 海洋cms模板
  • 飞飞cms模板
  • emlog模板
  • zblog模板
  • PbootCMS模板
  • Typecho模板
  • 小程序模板
  • psd模板
  • html模板
选择子栏目精准搜索 [点击关闭]

js教程

echarts柱状图样式参数

我的站长站 2024-09-06 共人阅读

1：线条/节点颜色

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF'
            }
        }
    },
  }
]

2：线条粗细

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
                width: 3
            }
        }
    },
  }
]

3：线条样式

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
                width: 3,
                type: 'dashed'
            }
        }
    },
  }
]

4：线条阴影

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
                width: 3,
                type: 'dashed',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 10
            }
        }
    },
  }
]

5：线条平滑

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    smooth: true,
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
                width: 3,
                type: 'dashed',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 10
            }
        }
    },
  }
]

6：线条节点大小

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    symbol: 'circle',
    symbolSize: 20,
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            }
        }
    },
  }
]

7：线条节点阴影

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    symbol: 'circle',
    symbolSize: 20,
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
            areaStyle: {
                color: 'rgba(0, 0, 0, 0.5)'
            }
        }
    },
  }
 ]

8：线条节点边框

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    symbol: 'circle',
    symbolSize: 20,
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
            borderColor: '#409EFF',
            borderWidth: 5
        }
    },
  }
]

9：线条节点边框阴影

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    symbol: 'circle',
    symbolSize: 20,
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
            borderColor: '#409EFF',
            borderWidth: 5,
            shadowColor: 'rgba(0, 0, 0, 0.5)',

            shadowBlur: 10,
            shadowOffsetY: 10
        }
    },
  }
]

10：工具提醒

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
        }
    },
    tooltip: {
      trigger: 'axis'
    },
  }
]

11：工具提醒样式

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
        }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br />{a}: {c}'
    },
  }
]

12：工具自定义提醒

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
        }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return params[0].name + '<br /><span style="color:#409EFF">hello world<span>'
      }
    },
  }
]

13：工具提醒背景

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
        }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#E6A23C'
    },
  }
]

14：工具提醒边框

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
        }
    },
    tooltip: {
      trigger: 'axis',
      borderColor: '#409EFF',
      borderWidth: 15
    },
  }
]

15：工具提醒阴影

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
        }
    },
    tooltip: {
      trigger: 'axis',
      shadowColor: 'rgba(0, 0, 0, 0.5)',
      shadowBlur: 10,
      shadowOffsetY: 10
    },
  }
]

16：工具提醒文字样式

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line',
    itemStyle: {
        normal: {
            color: '#E6A23C',
            lineStyle: {
                color: '#409EFF',
            },
        }
    },
    tooltip: {
      trigger: 'axis',
      textStyle: {
        color: '#409EFF',
        fontSize: 20
      }
    },
  }
]

17：工具箱

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

18：工具箱图标

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  toolbox: {
    feature: {
      saveAsImage: {
        icon: 'image://https://img.88icon.com/download/jpg/202001/388cc11b509232e7b5a2340742aba2ef.jpg!88con'
      }
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

19：工具箱标题

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  toolbox: {
    feature: {
      saveAsImage: {
        title: '保存为图片'
      }
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

20：工具箱功能

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  toolbox: {
    feature: {
      dataZoom: {},
      dataView: {readOnly: false},
      magicType: {type: ['line', 'bar']},
      restore: {},
      saveAsImage: {}
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

21：类别显示

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name:'Mon',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name:'Tue',
      data: [50, 30, 24, 18, 35, 47, 60],
      type: 'line'
    }
  ]
};

22：类别显示位置

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    left: 'right'
  },
  series: [
    {
      name:'Mon',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name:'Tue',
      data: [50, 30, 24, 18, 35, 47, 60],
      type: 'line'
    }
  ]
};

23：类别显示图标

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    icon: 'circle'
  },
  series: [
    {
      name:'Mon',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name:'Tue',
      data: [50, 30, 24, 18, 35, 47, 60],
      type: 'line'
    }
  ]
};

24：类别显示图标大小

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    icon: 'circle',
    itemWidth: 20,
    itemHeight: 20
  },
  series: [
    {
      name:'Mon',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name:'Tue',
      data: [50, 30, 24, 18, 35, 47, 60],
      type: 'line'
    }
  ]
};

25：类别显示图标间距

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    icon: 'circle',
    itemGap: 20
  },
  series: [
    {
      name:'Mon',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name:'Tue',
      data: [50, 30, 24, 18, 35, 47, 60],
      type: 'line'
    }
  ]
};

26：类别显示图标文字大小

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    icon: 'circle',
    textStyle: {
      fontSize: 20
    }
  },
  series: [
    {
      name:'Mon',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name:'Tue',
      data: [50, 30, 24, 18, 35, 47, 60],
      type: 'line'
    }
  ]
};

27：类别显示图标文字颜色

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    icon: 'circle',
    textStyle: {
      color: 'red'
    }
  },
  series: [
    {
      name:'Mon',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name:'Tue',
      data: [50, 30, 24, 18, 35, 47, 60],
      type: 'line'
    }
  ]
};

28：轴方向（同其他，如柱状图等）

option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

29：坐标轴名称

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    name: '我是Y轴名称'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

30：坐标轴名称位置

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    name: '我是Y轴名称',
    nameLocation: 'middle'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

31：坐标轴名称文字样式

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    name: '我是Y轴名称',
    nameTextStyle: {
      color: 'red',
      fontSize: 20
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

32：坐标轴名称与轴线之间的距离

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    name: '我是Y轴名称',
    nameGap: 20
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

33：显示标签

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true
      }
    }
  ]
};

34：标签位置

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true,
        position: 'left'
      }
    }
  ]
};

35：标签文字样式

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true,
        position: 'left',
        textStyle: {
          color: 'red',
          fontSize: 20
        }
      }
    }
  ]
};

36：标签背景色

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true,
        textStyle: {
          color: 'red',
          fontSize: 20
        },
        backgroundColor: 'yellow'
      }
    }
  ]
};

37：标签边框

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true,
        borderColor: 'blue',
        borderWidth: 2
      }
    }
  ]
};

38：标签边框圆角

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true,
        borderRadius: 10
      }
    }
  ]
};

39：标签内边距

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true,
        borderColor: 'blue',
        borderWidth: 5,
        borderRadius: 10,
        padding: 10
      }
    }
  ]
};

40：标签阴影

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true,
        borderColor: 'blue',
        borderWidth: 1,
        padding: 10,
        shadowColor: 'red',
        shadowBlur: 10,
        shadowOffsetX: 1,
        shadowOffsetY: 1
      }
    }
  ]
};

41：标签旋转

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        show: true,
        rotate: 45
      }
    }
  ]
};

42：x轴内容偏移

xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      interval: 0,
      rotate: 40
    }
  }
43：x轴内容样式
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      textStyle: {
        color: 'red'
      }
    }
  },


echarts柱状图
上一篇：百度echarts柱状图使用教程
下一篇：利用wordExport插件把网页内容导出为word文档格式教程
相关推荐
  • echarts
  • 柱状图
  • echarts柱状图样式参数

    1：线条/节点颜色series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: &#39;line&#39;, itemStyle: { normal: { color: &#39;#E6A23C&#39;, lineStyle: { color: &#39;#409EFF&#39...

    js教程 9 2个月前
  • 百度echarts柱状图使用教程
    百度echarts柱状图使用教程

    echarts简介echarts是百度出品的一款开源JS柱状图框架，目前市面柱状图大部分都是使用这款echarts。作为前端开发者不得不学好echarts框架，echarts文档太复杂，我的站长站精简了使用方法，不看原理，只给...

    js教程 8 2个月前
  • echarts增加loading加载中效果方法

    需要开发echarts中的loading加载中效果，我们可以使用到echart自带showLoading()方法。在需要加载数据的地方使用showLoadin()方法显示loading加载中效果，数据加载完成后再调用hideLoading()方法，隐藏loading加载中效果。官方文档官方文档地址：https://ec...

    js教程 9 1个月前
  • echarts柱状图样式参数

    1：线条/节点颜色series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: &#39;line&#39;, itemStyle: { normal: { color: &#39;#E6A23C&#39;, lineStyle: { color: &#39;#409EFF&#39...

    js教程 9 2个月前
  • 百度echarts柱状图使用教程
    百度echarts柱状图使用教程

    echarts简介echarts是百度出品的一款开源JS柱状图框架，目前市面柱状图大部分都是使用这款echarts。作为前端开发者不得不学好echarts框架，echarts文档太复杂，我的站长站精简了使用方法，不看原理，只给...

    js教程 8 2个月前
最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码：<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码：<a href="javasc...

    js教程
    js代码
    2天前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时，会先进行类型转换（type coercion），然后再比较值是否不...

    js教程
    js语法
    6天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站，而不再是单个页面，直接把代码放到自己的网站上，如果是博客建议放到header.php头部...

    js教程 3周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式，一种是通过脚本（Scripts）的方式引入，一种是通过插件（Packages）的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面，主要用到了JS的setTimeout语法。下面是一个定时...

    js教程
    JavaScript语法
    1个月前
JS教程标签
js语法 js获取 柱状图 echarts js代码 js计算 JS表单 JS请求 JS禁止 ajaxFileUpload jquery选择器 js小数 jquery方法 返回顶部 js复制 JS右键 js函数 JS判断 JS脚本 js随机 JavaScript语法 jsapi JS时间 jquery教程