Echarts 象形图

2018年5月15日

183732_0vzn_2893900

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);

}
优秀的个人博客,低调大师

微信关注我们

原文链接:https://yq.aliyun.com/articles/635245

转载内容版权归作者及来源网站所有!

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

相关文章

发表评论

资源下载

更多资源
优质分享Android(本站安卓app)

优质分享Android(本站安卓app)

近一个月的开发和优化,本站点的第一个app全新上线。该app采用极致压缩,本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario,低调大师唯一一个Java游戏作品

Mario,低调大师唯一一个Java游戏作品

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

Oracle Database,又名Oracle RDBMS

Oracle Database,又名Oracle RDBMS

Oracle Database,又名Oracle RDBMS,或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是目前世界上流行的关系数据库管理系统,系统可移植性好、使用方便、功能强,适用于各类大、中、小、微机环境。它是一种高效率、可靠性好的、适应高吞吐量的数据库方案。

Eclipse(集成开发环境)

Eclipse(集成开发环境)

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。幸运的是,Eclipse 附带了一个标准的插件集,包括Java开发工具(Java Development Kit,JDK)。