echarts3 图表配置小总结

grid: {   //图表在父元素的位置 也可以写成left,center等
  left: '10%', 
  right: '10%',
  bottom: '10%'
},
legend: { //图标的标签。样式会自动根据表格的格式改变,自己也可以调整
  data: ['询价', '企业招标', '询价增长率', '企业招标增长率']
},
color: ['#2ec7c9', '#ffb980', '#2ec7c9', '#ffb980'] ,// 可以直接在option中配置颜色,
根据图表的先后顺序来决定
xAxis: {} //这个类是来决定图表的X轴样式,我自己经常用的主要是data,type等属性。其他的比如颜色
宽度等,需要的时候自己定义(其实默认的我觉得也不错,是#333的颜色)
yAxis:{} //这个类是决定图表的Y轴样式,用法和xAxis基本相同。这两个属性中type可以决定图表的横竖
结构
series:{} //这个属性是里面最多的,用法也很多,决定你的图表是折线图还是柱状图或者其他的图,
具体的参考echarts 官网  http://echarts.baidu.com/index.html

上面的都是比较常用的内容,但是在写图表的时候,经常会遇到很多的要求,比如折线与柱状图混排,
比如给柱状图的柱子加上圆角等等。
图表混排
series: [
      {
        name: 'a',
        type: 'bar',
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
      },
      {
        name: 'b',
        type: 'bar',
        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
      },
      {
        name: 'v',
        type: 'line',
        yAxisIndex: 1,
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
      },
      {
        name: 'f',
        type: 'line',
        yAxisIndex: 1,
        data: [3, 4, 2, 1, 2, 3, 1]
      }
    ]
圆角:在series内ries
itmeStyle: {
          normal: {
            barBorderRadius: 4
          }
        }
平均值:
markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
后面会持续更新,先写到这里。



获取最大值和最小值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值