背景近期开发工作中涉及到大量的数据展示功能，主要使用echart3绘图，总的来说echart3还是比较容易上手的，本文整理几个实用用法，作为网上笔记，以备后用。学会看API这是echart3官方文档API是针对echart对象相关调用方法的说明，分为四类：echarts全局、echarts实例对象、动作、事件；配置项是echarts实例的各个配置的说明。动态触发tooltip在 ECharts 3
1、修改折线图上的数据标记点showSymbol:false , 表示不展示数据点，只有鼠标 hover 时， tooltip 展示。series: [
{
name: '进场', // 名称，图例和 tooltip 中展示
showSymbol: false, // 不展示数据标记点
type: 'line', // 类型
color: '
转载
2024-04-09 10:49:10
354阅读
echarts作为图标制作工具，近来地图数据不再提供下载。现在需要绘制一个县级的地图，而网上的资料基本都是绘制省级地图。在此记录一下绘制市县级地图的办法。首先描述一下原理，echarts.registerMap('yongjia',geoJson,{});这行代码，是绘制echarts地图的重点。GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息
常用属性总结： （1）tooltip:tooltip: {
trigger: "axis", // axis点击坐标轴触发，item 数据项图形触发， none不触发
axisPointer: {
type: "line",
lineStyle: { // 设置选中那条线的样式
转载
2024-07-14 07:09:55
1886阅读
使用iview的分页的时候，怎么使分页回到默认页面，比如第一页,一定要写上.sync否则不起作用
<Page :total="addtotal" size="small" :current.sync='pageSizeOpts.curr'></Page> VUE中axios进行表单请求的配置
vue中，使用axios进行请求，使用了proxyTable来进行
记账项目里必不可少的就是表格的使用，因此我在统计页面引入了 ECharts看看我的效果 它长这样，是不是很好看简单干净（夸夸自己！！！）
其实它刚开始可不是这样的，刚开始很不符合我的审美标准和数据标准，所以我用了差不多一天的时间来调表格数据和样式 这是他刚开始的样子 安装把 ECharts 的 Vue 插件和 TS 插件都安装好 yarn 或 npm 根据
转载
2024-09-04 22:08:01
65阅读
<template>
<div>
<h1>动画配置</h1>
<div id="canvas7" style="width: 1000px;height:400px;"></div>
</div>
</template>
<script>
export default
转载
2024-10-15 19:39:56
651阅读
最近项目又用到了echarts。记录一下，部分参数样式、x轴,y轴等参数的设置含义。
样式
mytextStyle={
color:“#333”, // 文字颜色
fontStyle:“normal”, //italic 斜体 oblique 倾斜
fontWeight:“normal”, // 文字粗细 bold bolder lighter 100 | 200 | 300 | 400…
转载
2024-07-09 09:57:21
268阅读
最近需求中用到折线图，单线条，多线交错，之前是散点图，用的是另一个 amcharts.js，这个文档也能找的到，回归早本次重点：ECharts一、首先引入echarts.common.min.js文件，当然开发状态下使用echarts.js可以更便于调试，传送门二、为图表准备一个dom容器，宽高可以自行定义， <body>
<!-- 为 ECharts 准备一
转载
2024-09-09 21:05:56
304阅读
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆环图案例</title>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts4.0.js" type="text/javascr
最近由于项目需要接触了echart图表插件，由于echart表格配置项比较多，因此整理了自己遇到的一些图表并且粘贴出代码，echarts官网API http://echarts.baidu.com/option.html#title首先，用图示解释几个配置option属性tooltip:legend:labelLine:需要实现的效果图如下，直接贴上代码，各配置项已在代码中通过注释说明清楚代码：
echarts基本属性基本配置theme = {
// 全图默认背景
// backgroundColor: ‘rgba(0,0,0,0)’,
// 默认色板
color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'
option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: fal
转载
2024-09-12 08:49:18
305阅读
上篇文章我们处理了map3D散点图的点击问题，发现只有一个散点的时候，点击会失效，把所有数据放在一个散点图里就可以了，那么新的问题又来了，所有数据都放一块了，该如何根据数据设置不同的symbol，这种需求很常见，比如这12条数据可以分成医院、学校和宾馆三类，每一类使用不同的symbol，但是翻看了文档，scatter3D的symbol并不支持回调函数，想要分别给散点设置symbol，那就得用循环来
在echarts 中实现渐变的具体几种方式在我们日常使用Echarts图表过程中，会遇到一些要求我们的echarts图表能实现颜色渐变，以下几种方式就能满足你的需求。文档参考 ECharts option 文档 。方式一：线性渐变：new echarts.graphic.LinearGradient(x,y,x2,y2,offset,boolean)x,y,x2,y2，包围框中的百分比，数值范围
转载
2024-04-16 15:00:27
1994阅读
ECHARTS配置项手册官网手册titlelegendgridxAxisyAxispolarradiusAxisangleAxisradardataZoomvisualMaptooltip1.tooltip提示内容过多分列显示并列2.多个echarts图共享tooltipaxispointertoolboxbrushgeoparallelparallelAxissingleAxistimelin
转载
2024-07-22 10:20:16
234阅读
一、vue下安装：npm install echarts --save局部引入：import echarts from 'echarts'创建echarts对象：var myChart = echarts.init(document.getElementById('right_piebox')) 注意：装图表的盒子必须设置宽高设置option，：myChart.setOption(op
转载
2024-10-18 15:01:47
199阅读
这是一篇小白的实现时间轴的可视化的笔记。Timeline说明timeline 需要操作多个option。“我们把传入 setOption 第一个参数，称为 ECOption，称传统的 ECharts 单个 option 为 ECUnitOption。当 timeline 和 media query 没有被设置时，一个 ECUnitOption 就是一个 ECOption。 当 timeline 或
title 下的各个属性如下图：showtitle.show | boolean
[ default: true ]
是否显示标题组件。例子：option = {
title : {
show:true,//默认为true，可以省略
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
前言最近有关项目要做一个下面的饼图（不考虑3d饼图）需求： 1、默认查询所有客户的发货额和运费额 2、点击对应的客户查询该客户的发货额和运费额一开始没仔细看，仔细一看是真特么难做。问题及解决问题1： 如何做到饼图就显示两个扇形，但是显示多个legend问题： 这里有个问题就是饼图的数据是对象的形式，如下，legend是要对应name属性的data: [
{ value: 1048, name:
