Echarts象形图简单示例

来源：互联网发布：xap格式软件下载编辑：程序博客网时间：2024/05/18 03:35

Echarts象形柱图（山峰图）简单应用

简单示例
代码详述

option = {        title: {          text: '年龄段',          textStyle:{              fontSize:14,              color:'#444444',              fontFamily: "Microsoft Yahei",              fontWeight:'100'          },          x: 'center'        },        tooltip: {            trigger: 'axis',            axisPointer: {                type: 'none'            },            formatter: function (params) {                return params[0].name + ': ' + params[0].value;            }        },        xAxis: {            data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行', ],            axisTick: {show: false},            axisLine: {show: false},            axisLabel: {                textStyle: {                    color: '#444444'                }            }        },        yAxis: {            splitLine: {show: false},            axisTick: {show: false},            axisLine: {show: false},            axisLabel: {show: false}        },        color: ['#89DA4F','#FCC828','#8EC7F4','#CDCBEC','#14B961'],        series: [{            name: 'hill',            type: 'pictorialBar',            barCategoryGap: '0%',            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',            symbol: 'path://path://M10 600 Q 95 0 180 600',            label:{                     normal:{                       show: true,                       position: 'top',                      formatter:'{c}%',                    }                   },            itemStyle: {                normal: {                    opacity: 0.5,                    color: function (params){                      var colorList = ['#89DA4F','#FCC828','#8EC7F4','#CDCBEC','#14B961','#E3E3E3'];                      return colorList[params.dataIndex];                    }                },                emphasis: {                    opacity: 1                }            },            data: [123, 60, 25, 18, 12, 9, 2, 1],        }]    };

注意事项
1. 替换
替换 option.xAxis.data=x;
option.series[0].data=y;（x,y分别是一个数组）
2. 属性值修改
依据特定的需求，对option对象的属性做相应的修改

象形图的多种示例

阅读全文

0 0