国瑞前端
立即登录 马上注册
当前位置: 前端 > ECharts常用代码及说明整理

ECharts常用代码及说明整理

2019-03-08 分类：前端 作者：huanggr 阅读（2521）

在开发可视化分析或者大数据展示的时候，经常会用到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
        }
    }
},

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(4) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签：

上一篇：

下一篇：

相关推荐

共 2 条评论关于"ECharts常用代码及说明整理"

最新评论

  1. 妙文屋
    Windows 7 Firefox 61.0

    不错不错，来看看。。

    2019-03-28 17:34 回复
    1. 国瑞个人博客
      Windows 10 Chrome 74.0.3729.108

      @妙文屋欢迎来访

      2019-04-26 13:43 回复
    2. 暂无留言哦~~

博客简介

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

博主独立研发主题：

  • 微信小程序

    欢迎扫码关注微信小程序

    免费领取学习资料和视频

广告

最近更新

广告

广告

热门标签

精彩评论

广告

站点统计

  • 文章总数： 343 篇
  • 草稿数目： 90 篇
  • 分类数目： 32 个
  • 独立页面： 5 个
  • 评论总数： 174 条
  • 链接总数： 10 个
  • 标签总数： 117 个
  • 注册用户： 153 人
  • 访问总量： 8,910,424 次
  • 最近更新： 2022年5月20日