193Echarts - 自定义系列（Custom Cartesian Polygon）

最新推荐文章于 2024-08-19 11:02:22 发布

杨林伟

最新推荐文章于 2024-08-19 11:02:22 发布

阅读量1.2k

点赞数 2

分类专栏： # Echarts

本文链接：https://blog.csdn.net/qq_20042935/article/details/89847775

版权

Echarts 专栏收录该内容

280 篇文章 36 订阅

订阅专栏

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 1024px;height:768px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;


var data = [];
var dataCount = 7;
for (var i = 0; i < dataCount; i++) {
    var val = Math.random() * 1000;
    data.push([
        echarts.number.round(Math.random() * 100),
        echarts.number.round(Math.random() * 400)
    ]);
}

function renderItem(params, api) {
    if (params.context.rendered) {
        return;
    }
    params.context.rendered = true;

    var points = [];
    for (var i = 0; i < data.length; i++) {
        points.push(api.coord(data[i]));
    }
    var color = api.visual('color');

    return {
        type: 'polygon',
        shape: {
            points: echarts.graphic.clipPointsByRect(points, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            })
        },
        style: api.style({
            fill: color,
            stroke: echarts.color.lift(color)
        })
    };
}

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['bar', 'error']
    },
    dataZoom: [{
        type: 'slider',
        filterMode: 'none',
        height: 8,
        bottom: 20,
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        handleSize: 20,
        handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
        }
    }, {
        type: 'inside',
        filterMode: 'none'
    }],
    xAxis: {},
    yAxis: {},
    series: [{
        type: 'custom',
        renderItem: renderItem,
        data: data
    }]
};



			myChart.setOption(option);
		</script>
	</body>

</html>