国瑞个人博客
首页 > 前端 > ECharts常用代码及说明整理

ECharts常用代码及说明整理

ECharts常用代码及说明整理

 2019年03月08日 作者: 国瑞个人博客 488次浏览

在开发可视化分析或者大数据展示的时候,经常会用到echarts图表,有许多经常会用的参数,这里给大家列举一下,以方便在需要的时候直接使用即可,大家也可以在前端开发栏目下面查看更多的知识技巧!

1.引入echarts.js这个网上下一个或者用cdn。

2.html加一个放图表的容器

1
<div id="main" style="width:400px;height:400px"></div>

3.找到这个标签

1
var myChart = echarts.init(document.getElementById('main'))

4.放入需要的option数据(一般直接在echarts官网选好了复制即可)

5.为echarts对象加载数据

1
myChart.setOption(option);

PS:建议3、4、5步用函数封装起来,这样图表多的时候也好找些。

1
2
3
4
5
6
7
 myChart();
 function myChart(){
     var myChart = echarts.init(document.getElementById('main'))
     option ={...}
     myChart.setOption(option);

}
图表X轴内容全部显示

有时候我们X轴的文字会很长,多个的话就会挤到一起,这时候我们需要这样设置,在xAxis对象里加:

1
2
3
4
axisLabel:{
     interval:0,  //横轴信息全部显示
     rotate:-30,  // -30度角倾斜显示
 }
图表图例字体颜色,大小, 在legend对象里加:
1
2
3
4
textStyle:{    //图例文字的样式
       color:'#fff',
       fontSize:12
   }
图表数据颜色,在series对象里加
1
2
3
4
5
itemStyle:{
           normal:{
               color:'#ceee61'
           }
       },
图表字体颜色设置(在xAxis或yAxis里加)
1
2
3
4
5
6
axisLabel: {
       show: true,
       textStyle: {
           color: '#fff'
       }
   }
调整图表在div中的大小和位置
1
2
3
4
5
grid:[
    {
     x: '2%', y: '2%', width: '80%', height: '80%'
     }
 ],

设置图表背景颜色(和title、tooltip等同级)
backgroundColor: ['#02204a'],
设置饼图数据在圈内
在series数组里设置,注意,label和data数组统计,不要把label放在itemStyle里面。

1
2
3
4
5
6
7
8
9
10
11
12
  label: {
    normal: {
        position: 'inner',
        formatter: '{b} : {c} ({d}%)',

        textStyle: {
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 14
        }
    }
},
百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《ECharts常用代码及说明整理》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/1325.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 4 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
4

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 2 条评论

  1. 妙文屋 Windows 7 | Firefox 61.0

    不错不错,来看看。。

    1. 国瑞个人博客
      国瑞个人博客 Windows NT | Chrome 74.0.3729.108

      @妙文屋欢迎来访

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 216 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 803 天
  • 注册用户: 659 人
  • 访问总量: 8780734 次
  • 最近更新: 2019年7月15日
-->