IT评测·应用市场-qidao123.com技术社区

标题: echarts属性记忆点 [打印本页]
作者: 渣渣兔    时间: 2022-8-12 23:12
标题: echarts属性记忆点
1、如何去掉X、Y轴的网格线，关键是splitLine{show:false}
  1. 1 xAxis:[{
  2. 2 type:'value',
  3. 3 splitNumber:2,
  4. 4 scale:true,
  5. 5 splitLine:{
  6. 6    show:false     //去掉网格线
  7. 7 }
  8. 8 }]
  9. 9
  10. 10 yAxis:[{
  11. 11 type:'value',
  12. 12 splitNumber:2,
  13. 13 scale:true,
  14. 14 splitLine:{
  15. 15 show:false    //去掉网格线
  16. 16 }
  17. 17
  18. 18 }]
复制代码
2、Echarts实现隐藏网格，刻度线，x轴，y轴
  1. 1 yAxis: {
  2. 2     show: true,
  3. 3     type: 'value',
  4. 4     splitLine:{show: false},   //去除网格线
  5. 5     nameTextStyle:{
  6. 6         color:'#abb8ce'
  7. 7     },
  8. 8     axisLabel: {
  9. 9         color:'#abb8ce',
  10. 10     },
  11. 11     axisTick:{ //y轴刻度线
  12. 12         show:false
  13. 13         },
  14. 14         axisLine:{ //y轴
  15. 15             show:false
  16. 16         },
  17. 17 },
复制代码
3、echartsX轴都加上单位 / 只在末尾加上单位
  1. 1 xAxis:{
  2. 2   name: 's',// 这个设置只在末尾添加单位
  3. 3   axisLable: {
  4. 4     formatter: `{value}s` // 在每个x轴坐标都添加了单位
  5. 5   }
  6. 6 }
复制代码
4、echarts中x轴刻度单位名称不显示完全
  1. 1 //   调整大小
  2. 2  grid: {
  3. 3            left: '3%',
  4. 4            right: '13%',
  5. 5            bottom: '3%',
  6. 6            containLabel: true
  7. 7         },
复制代码
5、echarts修改柱状图的宽度

 
 6、ECharts折线从x轴原点（0点）开始
  1. 1 xAxis: {
  2. 2           triggerEvent: true,
  3. 3           data: xAxis,
  4. 4           boundaryGap: false, // false时从0刻度开始
  5. 5           axisLine: {
  6. 6             show: false,
  7. 7             lineStyle: {
  8. 8               color: '#314656',
  9. 9               width: '1'
  10. 10             }
  11. 11           },
  12. 12           axisTick: { // x轴刻度线
  13. 13             show: false
  14. 14           }
  15. 15         }
复制代码
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4