国瑞前端
当前位置: 前端 > ECharts常用代码及说明整理

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

    不错不错,来看看。。

    1. 国瑞个人博客
      Windows 10 Chrome 74.0.3729.108

      @妙文屋欢迎来访

  2. 暂无留言哦~~

博客简介

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

博主独立研发主题:

广告

广告

广告

广告

精彩评论

广告

站点统计

  • 文章总数: 334 篇
  • 草稿数目: 86 篇
  • 分类数目: 28 个
  • 独立页面: 5 个
  • 评论总数: 108 条
  • 链接总数: 10 个
  • 标签总数: 111 个
  • 注册用户: 176 人
  • 访问总量: 8,677,456 次
  • 最近更新: 2021年7月21日
服务热线:
 

 QQ在线交流

 旺旺在线