首先什么是echarts，可视化有哪些？
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求.
同时市场上echarts已在市场运行多年，也有很多类似的开源可视化库，ACharts、Highcharts、ApexCharts、AntV等，大屏展示DataV等。视需求而定，这些都可以做可视化，并且目前AntV可视化最全，包含也更广泛，Echarts更成熟，应用广泛。
echarts渲染有哪些方法。
1.echarts是由哪些组成；
首先Demo容器、初始化echarts实例、显示图标；
//渲染echarts.js里的方法，里面包含单位、x轴、y轴
//双线折线统计图
export const threeCharts = (myChart,dataTime, applyNumAry, inputNumAry, successNumAry){
var option;
//定义渲染方式
option = {
tooltip: {//控制展示弹窗信息
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {//控制图例位置、文字大小等
bottom: '10'
},
xAxis: {//x轴展示方法
type: 'category',//x轴展示类别
boundaryGap: false,
data: dataTime
},
yAxis: {//y轴展示方法
name: '单位:'+unit,//y轴单位展示
type: 'value',//y轴展示类别
axisLabel: {
formatter: '{value}'
}
},
series: [//展示x轴数据整理以及颜色控制
{
name: lineName[0],
type: 'line',
data: approveNumAry,//传入数据
itemStyle: {
color: "#39C5EA"//可以搞个数组，传进来处理后展示吸纳谷歌那信息
},
lineStyle: {
color: "#39C5EA"
}
},
{
name: lineName[1],
type: 'line',
data: loanNumAry,//传入数据
itemStyle: {
color: "#C1C800"
},
lineStyle: {
color: "#C1C800"
}
}
]
}
//渲染
option && myChart.setOption(option);
//定义一个id容器，记得标相关宽高
<div id="linetwochart"></div>
//引入相关方法
import { threeCharts, lineCharts } from '@/utils/echarts'
//方法
methods: {
//通过封装请求方法获取数据
async getMonthDetail(index) {
let res = await 定义的方法()
if(res.code == '成功返回参数'){
let { data } = res;
//处理data返回参数
this.custOneDataLine(时间数组，参数...,....)
}
},
//第一个折线图
custOneDataLine(dataTime, applyNumAry, inputNumAry, successNumAry){
//通过getElementById方法获取渲染id节点
var chartDom = document.getElementById('linechart');
//myChart渲染动作
var myChart = echarts.init(chartDom);
threeCharts(myChart, dataTime, applyNumAry, inputNumAry, successNumAry);
},
}
/**************/
渲染由哪几部分组成
1.1.1tooltip属性展示:控制弹出相关提示数据
来自https://blog.csdn.net/weixin_43997143/article/details/107645991
legend: {
show: true, //是否显示
type: "plain", // 触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
triggerOn:"mousemove",//提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。
triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showContent:true,//是否显示提示框浮层
alwaysShowContent:true,//是否永远显示提示框内容
showDelay:0,//浮层显示的延迟，单位为 ms
hideDelay:100,//浮层隐藏的延迟，单位为 ms
enterable:false,//鼠标是否可进入提示框浮层中
confine:false,//是否将 tooltip 框限制在图表的区域内
transitionDuration:0.4,//提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
position:['50%', '50%'],//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
backgroundColor:"transparent",//标题背景色
borderColor:"#ccc",//边框颜色
borderWidth:0,//边框线宽
padding:5,//图例内边距，单位px 5 [5, 10] [5,10,5,10]
textStyle:mytextStyle,//文本样式
1.2.1legend属性展示:控制图例、文字等
legend: {
show: true, //是否显示
type: "plain", // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例
zlevel: 1, // 所有图形的 zlevel 值。
icon: "circle",
top: "5%", // bottom:"20%" // 组件离容器的距离
right: "5%", //left:"10%" // // 组件离容器的距离
width: "auto", // 图例组件的宽度
height: "auto", // 图例组件的高度
orient: "horizontal", // 图例列表的布局朝向横竖两种。 'horizontal' 'vertical' padding: 5, // 图例内边距
itemWidth: 6, // 图例标记的图形宽度。
itemGap: 20, // 图例每项之间的间隔。
itemHeight: 14, // 图例标记的图形高度。
selectedMode: true, // 图例选择的模式，
inactiveColor: "#ccc", // 图例关闭时的颜色。
textStyle: {
color: "#556677", // 文字的颜色。
fontStyle: "normal", // 文字字体的风格。
fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
fontFamily: "sans-serif", // 文字的字体系列。
fontSize: 12, // 文字的字体大小。
lineHeight: 20, // 行高。
backgroundColor: "transparent", // 文字块背景色。
borderColor: "transparent", // 文字块边框颜色。
borderWidth: 0, // 文字块边框宽度。
borderRadius: 0, // 文字块的圆角。
padding: 0, // 文字块的内边距
}, // 自定富文本样式
},
},
//以上是vue echarts简单的渲染方法
2.如何使用DataV实现大屏,F11放大后展示:
可以通过这个网站设计（https://data.avuejs.com/）
git地址（https://gitee.com/pengxiaotian/datav-vue）
使用实例（http://datav.jiaminghi.com/guide/）
2.1.1DataV的作用
主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：
和echarts一样先设置dataV的容器
<dv-full-screen-container>content</dv-full-screen-container>
3.AntV方法以及主题色相关设计
3.1.1：引入
import { registerTheme, Chart } from '@antv/g2'
3.2.1: 注册主题
registerTheme('newTheme', {
defaultColor: 'red',
colors10: [
'#FF6B3B',
'#626681',
'#FFC100',
'#9FB40F',
'#76523B',
'#DAD5B5',
'#0E8E89',
'#E19348',
'#F383A2',
'#247FEA'
],
colors20: [
'#FF6B3B',
'#626681',
'#FFC100',
'#9FB40F',
'#76523B',
'#DAD5B5',
'#0E8E89',
'#E19348',
'#F383A2',
'#247FEA',
'#2BCB95',
'#B1ABF4',
'#1D42C2',
'#1D9ED1',
'#D64BC0',
'#255634',
'#8C8C47',
'#8CDAE5',
'#8E283B',
'#791DC9'
]
})
3.3.1: 主题色使用
export default class VChart extends Chart {
constructor(props) {
super(props)
super.theme('newTheme')
}
}
3.4.1:渲染等与echarts类似
4.地图方面的渲染以及地图方面的展示
地图方面展示方法也有很多，简单的用echarts还可以，复杂一点的用百度地图可以，再复杂（地区圈入，地铁公交渲染等）一点的可以用MineMap(https://www.minedata.cn/portal/index)
4.1.1：MineMap
百度、echarts等网上都有，就讲讲MineMap的使用
vue使用时需要先在在public/index.html内引入
<link rel="stylesheet" href="http://minedata.cn/minemapapi/v2.0.0/minemap.css">
div。。。
<script src="http://minedata.cn/minemapapi/v2.0.0/minemap.js"></script>
<script src="https://minedata.cn/minemapapi/v2.0.0/plugins/template/template.js"></script>
<script src="https://minedata.cn/minemapapi/v2.1.0/minemap-util.js"></script>
<script src="./lib/minemap-util.js"></script>
使用方式
this.map = new minemap.Map({
container: 'home_map',
style: process.env.VUE_APP_MINEMAP_STYLE,
center: [120.14, 33.36],
zoom: 8,
pitch: 0,
maxZoom: 17, // 地图最大缩放级别限制
minZoom: 1, // 地图最小缩放级别限制
logoControl: true
})
this.map.on('load', () => {
// 增加自定义数据源、自定义图层
this.onMapLoad()
})
const nav = new minemap.Navigation({
showCompass: true,
showZoom: false
})
// this.map.addControl(new minemap.Fullscreen(), "top-right");
this.map.addControl(nav, 'top-right')
// console.log(this.map)
// this.map.addControl(nav, 'top-left');
this.getMapTitleData()
this.mapTitleData.forEach((item, index) => {
this.changeMapTitleDate(index, item.name)
})
显示展示
总结
在使用echarts可视化时，有时设计花费时间较长，而且现在echarts开源社区开源的设计图好像找不到了，找到新的设计的网址(http://chartlib.datains.cn/echarts)（http://www.isqqw.com/homepage）（http://analysis.datains.cn/finance-admin/index.html#/chartLib/all）两个都不错，可以看看这两个。路漫漫其修远兮，吾将上下而求索
5815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
