利用echart工具,编写js代码
时间: 2023-07-28 14:53:29 浏览: 87
好的,以下是基于 ECharts 的 JavaScript 代码示例,实现了和上述 Python 代码相同的可视化效果。需要注意的是,这里的数据是在 Python 端生成并传递到了 JavaScript 中,因此在实际应用中需要根据具体情况进行调整。
```javascript
// 定义评论数据
var comments = [
{
"content": "好看",
"author": "张三",
"likes": "100",
"time": "2021-01-01 12:00:00",
"location": "北京"
},
{
"content": "不错",
"author": "李四",
"likes": "50",
"time": "2021-01-02 13:30:00",
"location": "上海"
},
{
"content": "很一般",
"author": "王五",
"likes": "30",
"time": "2021-01-03 15:00:00",
"location": "广州"
}
];
// 生成柱状图
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '豆瓣电影评论点赞数',
left: 'center',
textStyle: {
fontSize: 24
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var data = params[0].data;
var content = data.content;
var author = data.author;
var likes = data.likes;
var time = data.time;
var location = data.location;
return author + '<br>' + time + '<br>' + location + '<br>' + content + '<br>点赞数:' + likes;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
dataZoom: {
type: 'slider',
show: true,
start: 0,
end: 100,
filterMode: 'filter'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value',
name: '点赞数',
nameTextStyle: {
fontSize: 16
}
},
series: []
};
for (var i = 0; i < comments.length; i++) {
var comment = comments[i];
var seriesItem = {
name: comment.author,
type: 'bar',
data: [{
value: parseInt(comment.likes),
content: comment.content,
author: comment.author,
likes: comment.likes,
time: comment.time,
location: comment.location
}],
label: {
show: true,
position: 'top',
formatter: function (params) {
var data = params.data;
return data.time + '<br>' + data.location + '<br>' + data.content;
}
}
};
option.xAxis.data.push(comment.author);
option.series.push(seriesItem);
}
myChart.setOption(option);
```
这段 JavaScript 代码需要在 HTML 文件中引入 ECharts 库,例如:
```html
<head>
<meta charset="UTF-8">
<title>豆瓣电影评论点赞数</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px;"></div>
<script src="main.js"></script>
</body>
```
其中,main.js 是包含上述代码的 JavaScript 文件。
阅读全文