echarts

最新推荐文章于 2023-10-23 15:49:10 发布

smile or not

最新推荐文章于 2023-10-23 15:49:10 发布

阅读量349

点赞数

博客介绍了使用最新ECharts的相关技巧。强调需下载最新版，旧版功能可能受限。具体技巧包括在饼图中心写文字、设置坐标轴和分割线、改变柱状图柱子间隔、改变一组数据柱状图颜色，以及让折线图不同数值区间显示不同颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要下载最新echarts，旧版可能很多功能不支持

1.饼图中心写文字


var myChart = echarts.init(document.getElementById('row-1-1'));
	var option = {
		color:["#53647E","#05B6F0"],
		title: {
           text: '23.5',
           textStyle: {
               fontSize:18,
               //fontFamily:'sans-serif',
               fontStyle:'normal',
               color:'#05B5EE',
               verticalAlign:"top"
           },                      
           subtext: ['系统总体容量\n'],
           subtextStyle:{
                fontSize:10,
                color: '#05B5EE'
            },
           /*itemGap:'50px',*/
           x: 'center',
           y: 'center',
           top:'35%'
        },
	    tooltip: {
	        trigger: 'item',
	        formatter: "{a} <br/>{b}: {c} ({d}%)"
	    },
	    series: [
	        {
	            //name:'系统容量',
	            type:'pie',
	            radius: ['65%', '80%'],
	            avoidLabelOverlap: false,
	            label: {
	                normal: {
	                    show: false,
	                    position: 'center'
	                },
	                emphasis: {
	                    show: false,
	                    textStyle: {
	                        fontSize: '30',
	                        fontWeight: 'bold'
	                    }
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:[
	            	{value:11, name:'系统剩余容量'},
	                {value:12.5, name:'系统使用容量'},
	                
	            ]
	        }
	    ]
	};
	myChart.setOption(option);

设置title中的text和subtext即可，样式可以自定义

2.关于坐标轴和分割线的设置


var myChart = echarts.init(document.getElementById('row-2-2'));
var option = {
    color: ['#60CF54','#5EB95E','#c23531', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
    	top:'15%',
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true,
        borderColor:"#F5F5F5"
    },
    xAxis :{  //x坐标
        type : 'category',
        data : [],
        axisTick: {  //刻度
        	show:false,  //不显示刻度
        },
        show:false, //横坐标直接不显示
    },
    yAxis : [
        {
            type : 'value',
            nameTextStyle: {
            	color:'#fff'
            },
            axisLine:{   //坐标轴轴线
            	show:false, //不显示坐标线
            	lineStyle:{
            		color:'#fff'
            	}
            },
            splitNumber:1,  //左边分割数，1位分割一次
            axisTick: {  //刻度
	        	show:false,  //不显示刻度
	        },
            axisLabel:{  //刻度标签
            	color:"white",
            	show:true,
            	fontSize:10
            },
            splitLine: {
            	show:false  //分割线
            }
        }
    ],
    series : [{
		type:"bar",
		barCategoryGap:'50%',
		data:[100,80,60,50,20,60,70,90,20,100,50]
    }]
};
myChart.setOption(option);

主要就是设置xAxis和yAxis中的axisLine,axisLabel,axisTick,splitLine,splitNumber等，具体参数看手册即可

3.关于柱状图改变柱子间隔问题


series : [{
	type:"bar",
	barCategoryGap:'50%',
	data:[100,80,60,50,20,60,70,90,20,100,50]
}]

如果只有一组数据，想调整柱子间隔，在series中使用barCategoryGap调整即可

如果有多组数据，则需要使用barGap来调整类目之间的间距

4.关于一组数据改变柱状图颜色问题


series : [{
	type:"bar",
	barCategoryGap:'70%',
	data:[100,80,60,50,20],
	itemStyle: {
            normal:{  
            color: function (params){
                var colorList = ['#455B72','#A5AFB5','#D44191', '#45A5D5', '#15BCB5'];
                return colorList[params.dataIndex];
            }
        },
  },
  markLine : {
        data : [
            {type : 'average', name: '平均值'}
        ],
        lineStyle: {
			color: '#ddd',
			width: 1,
			type: 'dashed',
			/*shadowBlur: ...,
			shadowColor: ...,
			shadowOffsetX: 0,
			shadowOffsetY: 0,
			opacity: ...,
			curveness: 0,*/
		}
    }
}]

在series中设置itemStyle，像这个设置颜色即可

5.关于折线图不同数值区间颜色不同问题


var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    visualMap: {//区间内控制显示颜色
        show: false,
        dimension: 1,
        pieces: [[{gte: 7, lte: 15, color: '#7547A2'},{gte: 15, lte: 30, color: '#000'}]],//设置折线什么区间显示什么颜色
        seriesIndex:0,       
        outOfRange: {  //设置区间外的颜色
            color: 'red'
        }
    },
    series: [{
        name: '销量',
        type: 'line',
        areaStyle: {normal: {}},//加上这个使折线下方填充颜色
 
        data: [5, 20, 36, 10, 10, 20]
    }
    ]
};

在visualMap中设置pieces，其中可设置最大最小区间内折线的颜色，series中如果设置了areaStyle，则对应的区间内填充颜色也会相应改变，就像图中那样

附visualMap的配置


visualMap=[                                     //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。
                                                 // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。
    {
        show:true,                              //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
        type: 'continuous',                     // 定义为连续型 viusalMap
        min:10,                                  //指定 visualMapContinuous 组件的允许的最小值
        max:100,                                 //指定 visualMapContinuous 组件的允许的最大值
        range:[15, 40],                          //指定手柄对应数值的位置。range 应在 min max 范围内
        calculable:true,                        //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
        realtime:true,                          //拖拽时，是否实时更新
        inverse:false,                          //是否反转 visualMap 组件
        precision:0,                            //数据展示的小数精度，默认为0，无小数点
        itemWidth:20,                           //图形的宽度，即长条的宽度。
        itemHeight:140,                         //图形的高度，即长条的高度。
        align:"auto",                           //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
        text:['High', 'Low'],                   //两端的文本
        textGap:10,                              //两端文字主体之间的距离，单位为px
        dimension:2,                            //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
        seriesIndex:1,                          //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
        hoverLink:true,                         //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
        inRange:{                               //定义 在选中范围中 的视觉元素
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        },
        outOfRange:{  //定义 在选中范围外 的视觉元素。
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        },
        zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
        z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                               //组件离容器右侧的距离,'20%'
        bottom:"auto",                              //组件离容器下侧的距离,'20%'
        orient:"vertical",                         //图例排列方向
        padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
        backgroundColor:"transparent",            //标题背景色
        borderColor:"#ccc",                         //边框颜色
        borderWidth:0,                               //边框线宽
        textStyle:mytextStyle,                      //文本样式
        formatter: function (value) {                 //标签的格式化工具。
            return 'aaaa' + value;                    // 范围标签显示内容。
        }
    },
    {
        show:true,                          //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
        type: 'piecewise',                  // 定义为分段型 visualMap
        splitNumber:5,                      //对于连续型数据，自动平均切分成几段。默认为5段
        pieces: [                           //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            {min: 1500},                     // 不指定 max，表示 max 为无限大（Infinity）。
            {min: 900, max: 1500},
            {min: 310, max: 1000},
            {min: 200, max: 300},
            {min: 10, max: 200, label: '10 到 200（自定义label）'},
            {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
            {max: 5}                        // 不指定 min，表示 min 为无限大（-Infinity）。
        ],
        categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],  //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
        min:10,                             //指定 visualMapContinuous 组件的允许的最小值
        max:100,                             //指定 visualMapContinuous 组件的允许的最大值
        minOpen:true,                       //界面上会额外多出一个『< min』的选块
        maxOpen:true,                       //界面上会额外多出一个『> max』的选块。
        selectedMode:"multiple",           //选择模式，可以是：'multiple'（多选）。'single'（单选）。
        inverse:false,                      //是否反转 visualMap 组件
        precision:0,                        //数据展示的小数精度，默认为0，无小数点
        itemWidth:20,                       //图形的宽度，即长条的宽度。
        itemHeight:140,                     //图形的高度，即长条的高度。
        align:"auto",                       //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
        text:['High', 'Low'],               //两端的文本
        textGap:10,                          //两端文字主体之间的距离，单位为px
        showLabel:true,                     //是否显示每项的文本标签
        itemGap:10,                          //每两个图元之间的间隔距离，单位为px
        itemSymbol:"roundRect",             //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        dimension:2,                          //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
        seriesIndex:1,                        //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
        hoverLink:true,                      //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
        inRange:{                             //定义 在选中范围中 的视觉元素
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        },
        outOfRange:{                            //定义 在选中范围外 的视觉元素。
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        },
        zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
        z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                               //组件离容器右侧的距离,'20%'
        bottom:"auto",                              //组件离容器下侧的距离,'20%'
        orient:"vertical",                        //图例排列方向
        padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
        backgroundColor:"transparent",            //标题背景色
        borderColor:"#ccc",                         //边框颜色
        borderWidth:0,                               //边框线宽
        textStyle:mytextStyle,                      //文本样式
        formatter: function (value) {                //标签的格式化工具。
            return 'aaaa' + value;                   // 范围标签显示内容。
        }
    }
];