Echarts入门

1、开发包准备

     echarts.js

     zrender(是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型）

2、jsp

引用：

<scripttype="text/javascript"src="<%=base%>/js/portal/echarts/echarts.js">script>

<scripttype="text/javascript"src="<%=base%>/js/portal/echarts/chart/k.js">script>// 使用k线图就引入k，按需引入

div：

<divid="echartsId">

    <divid="myChart"style="height:450px;width:98%;border:1px solid #ccc;padding:10px;">div>

div>

3、js

//引入echart.js依赖的zrender.js, 再引入echart.js
require.config({ 
   packages: [ 
       { 
           name:'zrender', 
           location: window.base+'/zrender',
           main:'zrender' 
       }, 
       { 
           name:'echarts', 
           location: window.base+'/echarts', 
           main:'echarts' 
       } 
   ] 
});

$(document).ready(function(){
require(['echarts','echarts/chart/k'// 使用k线图就加载k模块，按需加载
                      ],function(ec) {
        varmyChart = ec.init(document.getElementById('myChart'));
});

var option = {
     backgroundColor: '#FFFFFF',  //背景颜色
              
     legend: {    //图例
           data: ['日K'],
                      inactiveColor: '#777',
                      textStyle: {
                          color: '#000000'    //日K字的颜色
                        }
             },
              
                tooltip: {   //气泡提示框
                trigger: 'axis',  //触发类型
                axisPointer: {    //坐标轴指示器
                animation: false,
                lineStyle: {
                              color: '#376df4',
                              width: 2,
                              opacity: 1
                          }
                 }
             },
       xAxis: {   //直角坐标系中的横轴
                type: 'category',
                data: dates,
                axisLine: { lineStyle: { color: '#8392A5' } }, //坐标轴线
                splitLine: { show: false }  //分隔线
             },
       yAxis: {   //直角坐标系中的纵轴
                 scale: true,
                 axisLine: { lineStyle: { color: '#8392A5' } },
                 splitLine: { show: false } //分割线
             },
              
                   dataZoom: [{    //数据区域缩放，常用于展现大数据时选择可视范围
                 textStyle: {
                     color: '#8392A5'
                 },
                 handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,

8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                 handleSize: '80%',  //控制手柄大小
                 dataBackground: {   //数据缩略背景
                     areaStyle: {
                         color: '#8392A5'
                     },
                     lineStyle: {
                         opacity: 0.8,
                         color: '#8392A5'
                     }
                 },
                 handleStyle: {
                     color: '#fff',
                     shadowBlur: 3,
                     shadowColor: 'rgba(0, 0, 0, 0.6)',
                     shadowOffsetX: 2,
                     shadowOffsetY: 2
                 }
             }, {
                 type: 'inside'
             }],
             animation: false,
                                 
series: [  //数据系列
                 {
                     type: 'candlestick',
                     name: '日K',
                     data: data,
                     itemStyle: {
                         normal: {
                             color: '#FD1050',
                             color0: '#0CF49B',
                             borderColor: '#FD1050',
                             borderColor0: '#0CF49B'
                         }
                     }
                 }
             ]
         };
             myChart.setOption(option);