ECharts介绍及使用方法_echarts datatype-优快云博客

本文介绍如何使用ECharts绘制雷达图及动态柱状图，涵盖图表库的下载、引入、配置及前后台数据交互过程，适合前端开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

官网地址

1.首先在官网选择合适的下载版本

[下载地址](http://echarts.baidu.com/download.html)
1
2.引入Echarts

<script  src="js/echarts.js"></script>
1
3.绘制一个简单的图表

  准备一个DOM容器
1
<div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>

4.创建一个简单的雷达图

<script type="text/javascript">
window.onload = function (){
            //指定图表的配置项和数据
            option = {
                              //标题
                        title: {
                              text: '基础雷达图'
                        },
                        tooltip: {},
                        legend: {
                              data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                        },
                        radar: {
                              // shape: 'circle',
                              name: {
                                 textStyle: {
                                    color: '#fff',
                                    backgroundColor: '#999',
                                    borderRadius: 3,
                                    padding: [3, 5]
                                 }
                              },
                              indicator: [
                                 { name: '销售（sales）', max: 6500},
                                 { name: '管理（Administration）', max: 16000},
                                 { name: '信息技术（Information Techology）', max: 30000},
                                 { name: '客服（Customer Support）', max: 38000},
                                 { name: '研发（Development）', max: 52000},
                                 { name: '市场（Marketing）', max: 25000}
                              ]
                        },
                        series: [{
                              name: '预算 vs 开销（Budget vs spending）',
                              type: 'radar',
                              // areaStyle: {normal: {}},
                              data : [
                                 {
                                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                                    name : '预算分配（Allocated Budget）'
                                 },
                                 {
                                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                                    name : '实际开销（Actual Spending）'
                                 }
                              ]
                        }]
                     };
                     //获取dom容器
                     var myChart = echarts.init(document.getElementById('chartmain'));
                     // 使用刚指定的配置项和数据显示图表。
                     myChart.setOption(option);
}
</script>

这样一个简单的雷达图就ok了，下面看下效果图

5.动态的柱状图

（1）还是创建一个装ECharts的DOM容器

（2）后台返回数据

(3）前台JavaScript代码
1
<script type="text/javascript">
  window.onload = function (){
      //财务看年度的合同金额echart数据源
      $.ajax({
            url:'',
            type:'post',
            datatype:'json',
            success : function(data){
                     var partner = new Array();//公司名
                     for(var i=0;i<data.length;i++){
                              partner.push(data.partner);
                     }
                     var odata=[];
                     for(var i=0;i<data.length;i++){
                              var obj={};
                              obj.name=partner;
                              obj.type='bar';
                              obj.data=[data.qyearOne,data.qyearTwo,data.qyearThree,data.qyearFour,data.yearOne,data.yearTwo,data.yearThree,data.yearFour,data.hyearOne,data.hyearTwo,data.hyearThree,data.hyearFour];
                              obj.barWidth=30;//宽度
                              odata.push(obj);
                     }
                     option = {
                        tooltip : {
                              trigger: 'axis'
                        },
                        legend: {
                              data:partner
                        },
                        toolbox: {
                              show : true,
                        },
                        calculable : true,
                        xAxis : [{
                                 type : 'category',
                                 data :                [qyear+'Q1',qyear+'Q2',qyear+'Q3',qyear+'Q4',year+'Q1',year+'Q2',year+'Q3',year+'Q4',hyear+'Q1',hyear+'Q2',hyear+'Q3',hyear+'Q4']
                              }],
                        yAxis : [{
                                 type : 'value'
                              }],

                        series : odata //前台组装数据
                     };
                  //获取要赋值的DOM控件
                        var myChart = echarts.init(document.getElementById('chartmain'));
                  //赋值
                        myChart.setOption(option);
            }
      });
</script>

这样一个前后台交互的柱状图就ok了
---------------------
作者：从0到1哦
来源：优快云
原文：https://blog.youkuaiyun.com/weixin_38653290/article/details/84888547
版权声明：本文为博主原创文章，转载请附上博文链接！