一个简单的e-Chart图表使用示例之散点图_echarts散点图案例-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37547070/article/details/72860918

本文介绍了一个使用e-Charts库制作散点图的简单示例，详细讲解了如何引入echarts.js文件，创建scatter.js配置文件以及在HTML中引用该图表的过程。散点图展示了新闻报道时间和情绪值的关系，横坐标为时间，纵坐标表示情绪值，从-1到1的范围。

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

在我们的这个系统里，有一个可视化图表的实现库是不断被反复用到的，就是e-Chart，对于制作可视化图表的新手来说，这是一个很好上手的东西，接下来我将以系统中的一个可视化图表为例，描述一下e-Chart的使用方法。

首先让我们来看一下图表的展示结果：

这个图的横坐标是新闻报道的时间，纵坐标是这篇新闻的情绪值，从-1到1是从积极到消极，0以上是积极，0以下则是消极。如果要做这样一个图表，首先我们得在项目里引入echarts.js这个文件，并且新建一个js文件，我们把它命名为scatter.js，接下来是scatter.js文件里面的内容

$(document).ready(function(){
var MyScatter= echarts.init(document.getElementById('Scatter'));

var data = [
    ['2012-03-01 06:06',
        1,
        "新闻报道一"
    ],
    [
        '2012-06-01 05:06',
        0.5,
        "新闻报道二"
    ],
    [
        '2013-03-02 05:06',
        -0.5,
        "新闻报道三"
    ]
];
var textStyle = {
    color: '#333',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: '微软雅黑',
    fontSize: 14,
};
option = {
	
    backgroundColor: '#fff',
    grid:{},
 
  
    tooltip: {
        /*返回需要的信息*/
        formatter: function(param) {
            var value = param.value;
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[2] + '(' + value[1] + ')' +
                '</div>';
        }
    },
    xAxis: {
        type:'time',
        name:'时间轴',
        splitLine: {
            show: true,
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
        }
    },
    yAxis: {
        type:'value',
        name:'情绪值',
        splitLine: {
            show: false,
        },
        axisLabel: {
            show: true,
        },
        axisTick: {
            show: false
        },
        max: 1,
        min: -1,
    },
    series: [{
        name: '',
        data: data,
        type: 'scatter',
        symbolSize: 20
    }]
};
MyScatter.setOption(option);});

具体的echarts的API在http://echarts.baidu.com/api.html#echarts 页面有很详细的介绍，在这里就不一一描述。

接下去就是在html文件中引用我们刚才建的scatter.js图表。我们可以看到，在刚刚的js文件里，创建了一个ID为Scatter的对象，而我们在html文件中引用时，就是通过这个ID来进行的。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body >
		
		<div style="height: 500px;width: 1000px;" id="Scatter"></div>
		
	

	</body>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/diagrams/echarts.js"></script>
		<script type="text/javascript" src="js/diagrams/Scatter.js"></script>


</html>

在上面的代码中我们可以看到，在html中只需要创建一个id为Scatter的div就可以将echart图表引入。