Echarts 象形圖

2018年5月15日

var walk = 'image://../images/health_walk.png';

var dom = document.getElementById("recoveryChart");

var myChart = echarts.init(dom);

var app = {};

option = null;

 

option = {

    tooltip: {

        trigger: 'axis',

        formatter: '{b}<br />{a1}:{c1}'

    },

    legend: {

        show: true,

        data: ['改善目标'],

        textStyle: {

            color: '#000'

        },

        left: 38

    },

    grid: {

        top: 60,

        left: 8,

        containLabel: true,

    },

    color: ['#0f0', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],

    xAxis: {

        type: 'category',

        boundaryGap: false,

        interval: 1,

        data: [0, '第2周', '第4周', '第6周', '第8周', '第10周', '第12周'],

        splitLine: {

            show: false,

            lineStyle: {

                type: 'solid',

                color: '#000',

            },

            interval: 0

        },

        axisTick: {

            show: false

        },

        axisLine: {

            lineStyle: {

                color: '#000'

            },

        },

    },

    yAxis: {

        name: '公斤',

        type: 'value',

        nameGap: 6,

        splitLine: {

            show: false,

            lineStyle: {

                color: '#000'

            }

        },

        axisLine: { //坐标軸線設定

            lineStyle: {

                color: '#000'

            }

        },

        axisTick: { //坐标軸刻度設定

            show: false

        },

        nameTextStyle: {

            color: '#000'

        },

        axisLabel: { //坐标軸刻度标簽設定

            color: '#000'

        },

        splitArea: { //分隔區域樣式設定

            show: false,

            areaStyle: {

                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],

            },

        },

    },

    series: [{

        type: 'pictorialBar',

        symbol: walk,

        symbolSize: [15, 23],

        z: 10,

        data: [{

            value: 88,

            symbolPosition: 'end',

            symbolOffset: [15,-23]

        },{

            

        },{

            

        },{

            

        },{

            

        },{

        

        },{

            value: 71,

            symbolPosition: 'end',

            symbolOffset: [-15, -23]

        }]

    },{

        name: '改善目标',

        type: 'line',

        step: 'middle',

        lineStyle: {

            normal: {

                color: '#ff9743',

            },

        },

        itemStyle: {

            normal: {

                color: '#ff9743'

            }

        },

        data: [88, 86, 83.5, 81, 76.9, 73, 71]

    }]

};

if(option && typeof option === "object") {

    myChart.setOption(option, true);

}