ECharts常用代码及说明整理

6

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

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表 2人参与