数据可视化
Bright2017
学,然后知不足!
展开
-
echarts 折线图点击事件
echarts 折线图点击事件转载 2022-11-11 14:50:27 · 3645 阅读 · 3 评论 -
echarts圆角环形图
效果图:Demo演示地址:https://www.makeapie.com/editor.html?c=xptea0dZY5完整代码:<template> <div> <polycyclicChart :series="polycyclicSeries"></polycyclicChart> </div></template>import polycyclicChart ..原创 2021-12-10 14:43:05 · 1118 阅读 · 2 评论 -
echart仪表盘进度条
先上效果图和链接演示Dome:https://www.makeapie.com/editor.html?c=xM-u9DKgR8<div class="dashboard"> <gaugeChart :data="dashValue"></gaugeChart> <div class="gaugeNum"> <div> <div>0</div> <div.原创 2021-12-07 09:35:49 · 1540 阅读 · 0 评论 -
echart 绑定点击事件无效,原因是属性设置错误
最近做的项目需要联动两个图表,点击在折线图或者柱状图柱子上,触发事件。正常做法就是给图表绑定上click事件即可,但这次绑定后却无效。最终发现是属性设置问题silent:true// 是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。改为true或者干脆不设置这个属性即可。子组件中 this.$emit("loadedChart", this.charts);在组件上绑定事件@loadedChart="manufactorClick"manuf...原创 2021-12-03 13:37:04 · 8240 阅读 · 2 评论 -
解决Echarts柱状图X轴数据隔一个显示
解决1.设置相应属性----axisLabel设置axisLabel中的interval为0xAxis: { type: 'category', data: ['攻击模式', '应对措施', '入侵集合', '恶意软件', '工具', '脆弱性', '威胁主体', '攻击活动', '身份', '攻击指标', '可观察数据'], axisPointer: { type: 'shadow' }, axisLabel: { interval: 0 //设置...转载 2021-11-10 10:06:06 · 5112 阅读 · 0 评论 -
vue图表之折柱图(柱状图和折线图),包含点击事件
效果图柱状图和折线图,主要是以柱状图为底,在柱状图的基础上加入了折线图可自定义的参数:series:数据的数量 type 图表的类型 bar柱状图 line折线 数据有几个,界面展示几个xAxis:X轴数据unit:顶部单位barWidth:柱子的宽度colorLine:柱子和折线的颜色backLine:Y轴背景线条颜色dataZoomNum:大于这个数量,横向滚动条出现legendBottom:legend距离底部的位置完整代码...原创 2021-11-05 18:21:24 · 2317 阅读 · 0 评论 -
vue项目中Echarts两个图表之间连接两条线
效果图 完整代码在最下面基本效果是,左侧默认显示最大占比的区域,旋转到右侧,同时两条线的起点是左侧扇形区域上下两点,两条线的终点是右侧扇形的上下两点。实现思路,两条线是div定位实现的,这里利用了css的属性transform-origin 设置基准点两条线都是设置右侧为基准点,同时设置了旋转transform: rotate(0deg);最终只需要更改偏移角度,就可以实现线条的移动。这里需要注意因为线条是根据左侧扇形区域的占比大小不同而移动,所以线条的宽度...原创 2021-08-05 15:35:26 · 5153 阅读 · 6 评论 -
vue中Echarts地图组件+城市json文件
效果图完整代码<template> <div id="app"> <div class="chart_content"> <tab1 ref="tab1"></tab1> </div> </div></template><script> import tab1 from './components/chart/tab1.vue' export defaul.原创 2021-08-03 16:15:13 · 780 阅读 · 0 评论 -
Echarts扇形图点击切换角度+右侧阴影区域和角度对齐
最终效果图 完整代码在最下面主要效果实现是中间阴影区域,随着左侧扇形图当前选中区域的角度变化随之变化。这里简单说下思路,主要是计算扇形区域两点之间的高度,因为右侧的地区高度是固定的,就是秦皇岛,张家界那一列高度,中间阴影部分的实现,是定位了一个长方形,上下有两个直角三角形,背景是白色,为了画出最终的两个三角形,所以要计算两个三角形的高。因为这里牵扯到定位,所以左侧的扇形图和长方形都是固定宽高,扇形图是固定宽高,所以半径也可以直接拿到,这里计算时需要用到两个公式,sinA(...原创 2021-08-02 17:22:47 · 635 阅读 · 0 评论 -
echarts图表legend整齐排列
效果图完整代码<template> <div id="app"> <div class="chart_content"> <chartEight :legendAll="legendAll" :xAxis="four_xAxis_data" :series="seven_series_data"></chartEight> </div> </div>&l.原创 2021-07-30 16:59:21 · 1756 阅读 · 0 评论 -
Vue项目中折线图圆滑显示,X轴加滚动条dataZoom
效果图这里需要注意的是,我的项目中Echarts版本是4.6。5.0的版本这里X轴滚动条样式会有所不同"echarts": "^4.6.0",完整代码<template> <div id="app"> <div class="chart_content"> <div>折线图--圆滑--X轴加滚动条</div> <chartSeven :legendone="four_legend_data_one" .原创 2021-07-29 17:23:29 · 1011 阅读 · 0 评论 -
Vue中Echarts扇形图legend实现文字百分比整齐排列
效果图主要实现两个功能,左侧文字后增加百分比,环形图中间,默认显示文字及百分比,鼠标滑过切换。完整代码<template> <div id="app"> <div class="chart_content"> <div>环形图</div> <chartThree :data="chart_two_data" :legend="legendData" @loadedChar原创 2021-07-29 15:29:29 · 2340 阅读 · 0 评论 -
Echarts中legend翻页自定义箭头
官网示例中的效果是最终需要的效果是legend:{ type: "scroll", orient: "vertical", pageIcons: { vertical: [ "path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22....原创 2021-07-29 09:59:48 · 1808 阅读 · 6 评论 -
Vue中echarts扇形图默认高亮并显示提示框
效果图代码<template> <div class="chart" v-resize="resizeCharts" ref="barChart"></div></template><script> import * as echarts from "echarts"; export default { name: "barChart", props: { data: {原创 2021-07-12 15:50:18 · 893 阅读 · 0 评论 -
Vue中封装的echarts组件
先上效果图最近做的项目中图表用到很多,所以简单记录下,目录结构很简单这里的resize.js是大佬写的一个监听窗口缩放的的事件,index.js是全局注册的v-resize 自定义指令,在每个组件中都使用到了。resize.js// 按钮权限判断指令const resize = { inserted: (el, binding, vNode) => { // 指令的绑定值,是一个function函数 .原创 2021-07-09 09:50:43 · 1117 阅读 · 1 评论 -
Vue中引入echarts
第一步:通过npm安装echarts依赖包npm install echarts --save第二步:在js中引用import * as echarts from 'echarts';转载 2021-07-09 09:21:29 · 157 阅读 · 0 评论 -
echarts折线图
效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>折线图</title> <style type="text/css"> body{background-color: #原创 2018-11-08 12:00:09 · 235 阅读 · 0 评论 -
前端数据可视化插件:Highcharts、Echarts和D3
前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/)、Echarts(http://echarts.baidu.com/)和D3(https://d3js.org/),Web开发过程中选择使用哪一个插件是很重要的问题。就我个人而言,一般会从以下几点考虑。1.兼容性使用一个插件之前必须要先评估一下它对浏览器的兼容性,不然写完了发现没法...转载 2018-09-26 09:04:49 · 970 阅读 · 0 评论 -
ECharts图表------饼状图
效果图: ECharts饼状图 // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('maintter')); option = { title : { text: 'Br原创 2018-01-16 15:08:13 · 944 阅读 · 0 评论