echarts中柱狀圖折線圖的基本配置

最近項目中有用到echarts展示數據，方便用戶以及平台分析，本打算用canvas自己寫一個，不過鑒於業務需求以及后續項目用到的頻率，還是決定自己學習echarts，echarts相對於highcharts是一個免費的開源框架，調查了一下午寫出了符合公司設計的圖表數據展示，中間也遇到了一些坑，現在做一個小的總結，首先參考官方文檔http://echarts.baidu.com/index.html中的文檔下面的教程，我項目中用的是ng+webpack

1  在項目目錄下安裝   npm install echarts --save


2  可以在對應的用到處引入echarts ，可以根據項目中所用到的模塊按需加載 

// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
//引入折線圖
require('echarts/lib/chart/line');  

此處我只用到了柱狀圖，以及折線圖，

3 做一些參數配置，

先說一些最基本的

var myChart = echarts.init(document.getElementById('recordBar'));
myChart.setOption(options);

>在結構中先定義一個容器ID，定義寬高;

>

var options={
    xAxis: {
 data: ['10','11','12','13','14','15','16'],
    },
    yAxis: {

 },
    series: [
 {
 // name: '銷量',  
            type: 'bar',      //類型設定柱狀圖
            barWidth: 24,     //柱狀圖寬度
            data:[10,20,30,40,20,30,10],
            itemStyle: {
 normal: {
 // color:'#fff'     //柱狀圖顏色tongyi
                    color: function (params) { //單獨設置沒一個柱狀圖顏色
                        var colorList = ['rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)',
                            'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)',
                            '#e1c8a4',];
                        return colorList[params.dataIndex];
                    }
 }
 },
            barGap: '20'          //柱間距    目前不好使
        },
    ]
};

這是必不可少的配置，這樣一個最基本的柱狀圖就出現了，不過會出現X軸，Y軸，以及背景網格，這些在實際開發中多半是不需要的，所以就要去掉X軸，但要保留文本信息，解決方案如下

xAxis: {
    data: $scope.oneData.day,
    //splitLine:{show: false},//去除網格線
    show: true,   //去除坐標為false
    //設置x軸坐標顏色
    axisLine: {
 lineStyle: {
 color: '#45c08a',
        }
 },
    //設置x軸文本顏色
    axisLabel: {
 show: true,
        textStyle: {
 color: 'rgba(255,255,255,0.7)'                    //x軸文本顏色
        }
 }
},

將x軸坐標設顏色與背景顏色一致隱藏，文本顏色單獨設置，y軸不要直接將show：false，將坐標以及信息全去掉，另外就是去背景網格線，

splitLine:{show: false},//去除網格線

柱狀圖間距是默認的，可以修改barGap：'xxx',既可以為百分比，又可以為具體值，柱狀圖可以單獨設置每一個顏色，如下

itemStyle: {
    normal: {
 // color:'#fff'     //柱狀圖顏色tongyi
        color: function (params) { //單獨設置沒一個柱狀圖顏色
            var colorList = ['rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)',
                'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)',
                '#e1c8a4',];
            return colorList[params.dataIndex];
        }
 }
},

我直接放的項目中代碼，前六個為白色，最后一個顯示橘色，突出今日交易量，如果項目中需要折線圖一並顯示，只需要在series中添加一個{}，也可以單獨將折線圖放另外一個容器，

//折線數據
{
 name: '交易量',
    type: 'line',
    symbol: 'square',   //將折線原點改為方塊
    symbolSize: 6,     //拐點大小
    itemStyle: {
 normal: {
 color: function (params) { //單獨設置每一個折點顏色
                var colorList = ['rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', '#e1c8a4'];
                return colorList[params.dataIndex];
            },       //折點顏色
            lineStyle: {
 color: 'rgba(255,255,255,0.7)',    //折線顏色
            }
 }
 },
    data: $scope.oneData.line
    //data:[40,50,60,70,50,90,80]
},

以上設置一個type類型，以及將拐點從默認的原點改為方塊，以及設置方塊大小，單獨設置每一個折點顏色，也可統一設置一種顏色，以及折線顏色，data用來填充數據的，我是從接口中獲得后定義數組展示的

最后一點就是容器怎么適應手機屏幕，如下

//設置容器上下左右間隔
grid: {
 // left: '50',
    // right: '10',
    //  bottom: '20',              //left,right,bottom,為容器距離外側包含塊的距離
    // containLabel: true
    x: 0,
    y: 20,
    x2: 0,
    y2: 30              //x,y代表縱坐標的左上角距離容器的大小     ---x2,y2代表橫坐標的右下角距離容器的大小
},

 

寫的比較清楚，可自測。我的布局是給定了容器寬高，利用flex布局將其容器先居中，容器寬是根據柱寬加一定間距算出來的，

這是有一個數據的情況下，左邊折線在最低處也是因為在一個容器內