百度Echarts图表使用

---

前言

最近做项目用到了Echarts，顺便总结一下Echarts用法

Echarts官网

一、Echarts特点？

• 1.项目开源
• 2.使用简单，官网中为我们封装了JS,会引用就可以得到完美的展示效果
• 3.种类多，eacharts实现简单，各类图形都有，相应的模板，有丰富的 API及文档说明
• 4.兼容性好，基于Html5，有着良好的动画渲染效果

二、使用步骤

1.引入一个Echarts

2.创建一个容器来放Echarts图表

        <!--树状图-->
        <div class="ibox">
            <div class="ibox-title">
                <%--<div class="ibox-tools"><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></div>--%>
            </div>
            <div id="myChart_gong" class="ibox-content" style="height: 450px"></div>
        </div>

3.获取数据赋给图表

var myChart_ri = echarts.init(document.getElementById('myChart_gong'));
myChart_ri.showLoading();    //数据加载完之前先显示简单的loading动画
function PowerAnalysis() {
    $.ajax({
        type: "POST",   //请求方式                
        async: false,   //false同步执行,true异步执行
        url: <%--URL路径--%>"=" + jQuery.now(),  //rand强制页面刷新，防止使用缓存
        dataType: "json",        //返回数据形式为json
        data: {},
        success: function (data) {

            if (data.bdsonetb != undefined && data.bdsonetb != null && data.bdsonetb != "") {
                myChart_ri.hideLoading();    //隐藏加载动画
                myChart_ri.setOption({        //加载图表数据
                    color: ['#008fe6', '#00b78e'], //backgroundColor: 'rgba(1,202,217,.2)',//'#008fe6', '#00b78e'
                    title: { text: '数据分析', subtext: '' }, tooltip: { trigger: 'axis' }, legend: { data: [ '用电量','用水量'] }, calculable: true,
                    toolbox: { show: true, feature: { magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } },
                    grid: { left: '3%', right: '4%', bottom: '3%', top: '22%', containLabel: true }, yAxis: { type: 'value' },
                    xAxis: [{ type: 'category', data: daylist }],
                    series: [ data.bdsonetb,data.bdstwotb]//传入数据
                    //series: [ data.bdstwotb,data.bdsonetb]
                });
            }
        }
    });
}

4.效果

5.配置项说明

• Color:为柱状颜色
• tooltip:{
  show:true,//是否显示提示框
  trigger:‘axis’,//触发方式
  backgroundColor:’#131725’,//提示框背景颜色
  borderColor:’#131725’,//提示框边框颜色
  borderRadius:2,//提示框边框圆角
  borderWidth:1,//边框宽度
  textStyle:{//文本字体颜色
  color:‘rgba(255,255,255,1)’
  }
• Legend:图表标签
• xAxis:表示x轴的配置，包括轴线样式、label样式、刻度样式、名称样式等
• yAxis:y轴相关设置，与x轴基本相同，常用type为value
• series:series是最重要的配置项，标书数据系列，通过type设置图表类型

---

配置项详细说明