echarts渲染单个横向柱状图示例

众所周知,echarts是百度出的一个开源图表框架,拥有很棒的交互效果和上手便捷。基于配置可以修改成自己想要的样子。这里附上传送门:百度echarts
如果你早已习惯怎么用,这里是它的配置项参考,可以迅速查找一下:echarts配置项手册
然后,下面就是咱所遇到的需求,就像下面这个样子的图表:
横向单图表
然后就开始参考配置项,在页面引入echarts,借助官方的调试编写配置,咱的配置项如下(顺手注释,不多解释):

// [初始化图表] 参考API文档:https://www.echartsjs.com/option.html  在线测试:https://echarts.baidu.com/examples/editor.html
    var chart_yxz = echarts.init(document.getElementById('chart_yxz'),'light');    //运行中

    // 设置图表参数选项
    var option_yxz = {
        title: {
	        text: '运行中车辆(0)',
            textStyle:{fontSize:16}
//	        subtext: '数据来自'
	    },
	    tooltip: {
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值