"start"
:
10
,
"end"
:
80
,
handleIcon
:
'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z'
,
handleSize
:
'110%'
,
handleStyle
:
{
color
:
"#5B3AAE"
,
textStyle
:
{
color
:
"rgba(204,187,225,0.5)"
,
fillerColor
:
"rgba(67,55,160,0.4)"
,
borderColor
:
"rgba(204,187,225,0.5)"
,
}
,
{
type
:
"inside"
,
show
:
true
,
height
:
15
,
start
:
1
,
end
:
35
}
]
,
series
:
[
{
name
:
"访问量"
,
type
:
"line"
,
symbolSize
:
10
,
symbol
:
'circle'
,
itemStyle
:
{
color
:
"#6f7de3"
,
markPoint
:
{
label
:
{
normal
:
{
textStyle
:
{
color
:
'#fff'
data
:
[
{
type
:
'max'
,
name
:
'最大值'
,
}
,
{
type
:
'min'
,
name
:
'最小值'
data
:
[
509
,
917
,
2455
,
2610
,
2719
,
3033
,
3044
,
3085
,
2708
,
2809
,
2117
,
2000
,
1455
,
1210
,
719
,
733
,
944
,
2285
,
2208
,
3372
,
3936
,
3693
,
2962
,
2810
,
3519
,
2455
,
2610
,
2719
,
2484
,
2078
}
,
{
name
:
"订单量"
,
type
:
"line"
,
symbolSize
:
10
,
symbol
:
'circle'
,
itemStyle
:
{
color
:
"#c257F6"
,
markPoint
:
{
label
:
{
normal
:
{
textStyle
:
{
color
:
'#fff'
data
:
[
{
type
:
'max'
,
name
:
'最大值'
,
}
,
{
type
:
'min'
,
name
:
'最小值'
data
:
[
2136
,
3693
,
2962
,
3810
,
3519
,
3484
,
3915
,
3823
,
3455
,
4310
,
4019
,
3433
,
3544
,
3885
,
4208
,
3372
,
3484
,
3915
,
3748
,
3675
,
4009
,
4433
,
3544
,
3285
,
4208
,
3372
,
3484
,
3915
,
3823
,
4265
,
4298
}
,
]
var xData = function() { var data = []; for (var i = 1; i < 31; i++) { data.push(i + "日"); } return data;}();option = { backgroundColor: "#1A1835", tooltip: { trigger: "axis", axisPointer: { .
this.lineChart =
echarts
.init(document.getElementById('lineMain'));
let option = {
tooltip: {
trigger: 'axis',
公司项目需要泡泡效果，项目已经引入了vue和
echarts
框架，就按着两个框架找了找，在
echarts
官网找到个例子，再结合自己的需求制作而成。只是记录给自己看的，如能帮上别人的忙也是乐意的。
先给个效果图。
这里使用的是
echarts
的关系图做的，即series的type=graph。下面先上代码后解释。
<div class="paopao" ref="paopaoChart...
说明：网络引用
echarts
.js和直接下载
echarts
引用的样式可能会不一致，需要对折线的样式和字体进行修改的请参考我的另外一篇文章https://blog.csdn.net/Wangwangwang___/article/details/81317732
1、下载
echarts
文件引用的样式（修改后）
2、网络引用的样式（修改后）
3、代码说明：
Echarts
示例图中提供的
气泡
图是这样的：Examples - Apache
ECharts
当然还提供了另外几个，具体可参考官网。但是我的需求中不能显示横纵坐标，具体的
实现
效果如图所示：
在展现
气泡
的过程中，最大的问题应该是某一个
气泡
的横纵坐标，因为要防止重合。其实后来想想，可以不用这个
气泡
图，而是自己写，然后生成随机数渲染图，并且球的大小根据value值得变大而变大。既然已经用了，那就来说说使用
Echarts
的
实现
吧。
<template>
var dom = document.getElementById("container");
var myChart =
echarts
.init(dom);
var option; // 后续定义一下option
myChart.off('click');
if (option ..
echarts
.registerLoading("test", function (chartInstance, cfg) {
var zr = chartInstance.getZr(),
width = chartInstance.getWidth(),
<script src="/assets/echart/
echarts
.js"></script>
<script src="/assets/echart/
echarts
.min.js"></script>
2. html页面添加
<div id ="li...
总是觉得柱图中
带
气泡
显示当前值的
echarts
显得稍微高端一些，于是乎研究一下为同学的贷款网站做下渠道推广点击访问率的
统计
分析。
首先去
echarts
官网demo下找了一个模板（当然是柱图的），改了改里面的参数的示例，大概出来一个雏形：
js代码如下：
option = {
title : {
text: '某地区蒸发量和降水量',
subte
要在Vue中使用
echarts
实现
折线图
，你需要按照以下步骤进行操作：
1. 首先，安装
echarts
库。你可以使用npm或yarn来安装
echarts
，具体命令如下：
npm install
echarts
yarn add
echarts
2. 在Vue组件中引入
echarts
库。你可以在组件的`<script>`标签中使用`import`语句引入
echarts
库，如下所示：
```javascript
import
echarts
from '
echarts
';
3. 在Vue组件的模板中准备一个具备大小的容器div，用于显示
折线图
。你可以给这个div设置一个id，如`main`，并设置宽度和高度，如下所示：
```html
<template>
<div id="app">
<!--为
echarts
准备一个具备大小的容器dom-->
<div id="main" style="width: 600px; height: 400px"></div>
</template>
4. 在Vue组件的`mounted`钩子函数中编写代码来绘制
折线图
。你可以使用`
echarts
.init`方法初始化一个
echarts
实例，并传入容器的id，如`main`。然后，使用`setOption`方法设置
折线图
的配置项，如x轴、y轴、数据等，如下所示：
```javascript
export default {
name: 'YourComponentName',
mounted() {
this.$nextTick(function () {
let charts =
echarts
.init(document.getElementById('main'));
charts.setOption({
// 设置
折线图
的配置项
// ...
通过以上步骤，你就可以在Vue中使用
echarts
实现
折线图
了。记得根据你的需求修改
折线图
的配置项，以及在`setOption`方法中设置相应的数据。
#### 引用[.reference_title]
- *1* *3* [vue中如何使用
echarts
——以
折线图
为例](https://blog.csdn.net/weixin_61032994/article/details/124023735)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [在Vue中使用
Echarts
](https://blog.csdn.net/qq_36538012/article/details/109571270)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
