v-charts传送门入口

e-charts传送门入口

折线图：

html代码如下：
<template><div><ve-line height="139px" width="370px" :extend="chartExtend" :data="chartData" :settings="chartSettings" :legend-visible="false" :visual-map="visualMap" :grid="grid" :data-zoom="dataZoom"> :title="{ text: '东南风 10m/s', left: 'center', textStyle: { color: '#ffffff', fontSize: 12, fontWeight: 100 } }" :toolbox="toolbox"></ve-line></div>
</template>

js代码如下：
// 引入渐变模块
// import 'echarts/lib/component/visualMap'
// 设置区域缩放
// import 'echarts/lib/component/dataZoom'
// 设置Y轴每条线序不同颜色
// import echarts from 'echarts/lib/echarts';
// 设置title标题，在引用图标地方调用 :title
// import "echarts/lib/component/title";
// 下载按钮
//	import 'echarts/lib/component/toolbox';
export default{data(){// 配置项this.chartSettings = {},this.dataZoom = [{type: 'slider',start: 0,end: 10,backgroundColor: 'rgba(0, 0, 0, 0)', // 区域滚条背景颜色fillerColor: 'rgba(0, 0, 0, 0.05)' // 区域滚条蒙层颜色}]// 配置图标按钮this.toolbox = {right: 50,feature: {saveAsImage: {}}}// 图表渐变（需要引入模块才能操作）this.visualMap = [{show: false, // 是否显示对应渐变信息type: 'piecewise', // splitNumber: 5,min: 0,max: 60,right: 0,top: '50%'}],// 图表剪切方法this.grid = {right: 100}// 设置区域缩放（需要引入模块才能操作）this.dataZoom = [{type: 'slider',start: 0,end: 10}]return {// 图表数据接收chartData: {columns: [], // 索引rows: [] // 数据},// 图表属性chartExtend: {// 设置显示图渐变颜色 需要引入import echarts from 'echarts/lib/echarts'color: [ new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#087A97'}, {offset: 1, color: '#011D46'}]) ],// 设置Y轴每条线序不同颜色 需要引入import echarts from 'echarts/lib/echarts''yAxis.0.splitArea': {show: true,areaStyle: {color: [// 现在设置的是第一个为渐变，之后的都是指定颜色new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#8ec6ad'}, {offset: 1, color: '#ffe'}]),'#F39AFF','#FBBBFF','#F1FF9D','#94FFAB']}},backgroundColor: 'transparent', // 图表背景颜色"yAxis.0.minInterval": 1, // Y轴0和1'yAxis.0.inverse': true, // Y轴翻转'series.1.yAxisIndex': 1, // 设定Y轴需要翻转的索引'yAxis.1.splitLine.show': false, // 去掉Y轴线color: ['red'], // 线轴颜色// 设置Y轴类目名"yAxis.0.type": "category","yAxis.0.data": [],"yAxis.1.type": "category","yAxis.1.data": ["预警", "告警"],// 设置折线图的折线series: {// 是否显示折线提示点showSymbol: true,// 折线颜色color: "#009EFF",// 折线提示点显示点实心symbol: "circle",// 折线是否圆滑smooth: false,// 线形变正方形step: "start",// 折线提示点大小symbolSize: 7,itemStyle: {normal: {// 折线隐藏方式lineStyle: {width: 0}}},// 告警线markLine: {// 是否显示起始圆点symbol: "none",// 去掉右边提示标题label: {formatter: ""},// 设置线条位置data: [{name: "预警线",type: "average", // 平均线yAxis: 1, // 设定标线位置lineStyle: {color: "skyblue" // 设置线条颜色}},{name: "告警线",type: "average", // 平均线yAxis: 2, // 设定标线位置lineStyle: {color: "skyblue"}}]},},// 设置图表位置,可以为top(上)、bottonm(下)、left(左)、right(右)grid: {y: 10, // 上y2: 10, // 下x: 0, // 左x2: 10, // 右containLabel: false // 去掉视图引导索引值},// x轴设置项xAxis: {// 去掉负数出现小标下标线错位问题onZero: falseaxisTick: {inside: true // 刻度消除},boundaryGap: false, // 是否去掉两边距离// 设置轴线文本样式axisLabel: {textStyle: {color: '#fff',fontSize: 14}},// 轴线样式axisLine: {show: true,lineStyle: {width: 0, // 隐藏线条color: '#fff'}},// 图表数据渲染线样式splitLine: {lineStyle: {type: 'dashed', // 轴线变成虚线color: '#ccc'}},// 鼠标移动显示tooltip:{// 提示位置position: ["20%", 5],formatter: (res)=>{this.$console.log(res)return res;}}},yAxis: {// 基本和xAxis中的配置一样splitNumber: 2, // Y轴索引间隔position:'left', // 定位之后，轴线即可选在一边max: '500', // Y轴最大值min: '0', // Y轴最小值// 线轴是否显示axisLine: {show: true,lineStyle: {color: '#fff'}},// 控制轴线文字启用样式axisLabel: {textStyle: {color: '#fff',fontSize: 14},// x轴索引值修改formatter: (res)=>{let name = ''switch(res){case 0:name = '优'break;case 100:name = '良'break;case 200:name = '轻度'break;case 300:name = '中度'break;case 400:name = '重度'break;case 500:name = '严重'break;}return name;}}},legend: {orient: 'vertical',x: 'right',y: 'center',// 去掉标题圆圈icon: 'none', // ‘rect’为正方形, ‘circle’为圆形（circle，rect ，roundRect，triangle，diamond，pin，arrow，none）// 改掉圆圈的大小itemHeight: 5,borderColor :'yellow',// icon 样式itemStyle: {color: "#fff"},// 文字样式textStyle: {color: '#fff'}},}}}
}

柱形图：

<ve-histogram :height="height" :width="width" :data="chartData" :extend="chartExtend" :settings="chartSettings" :loading="loading" :data-empty="chartData.rows.length <= 0" :mark-line="markLine":mark-point="markPoint"></ve-histogram>

<script>// 标线引入import 'echarts/lib/component/markLine'// 标点引入import 'echarts/lib/component/markPoint'export default {data(){// 标线配置（需要引入模块才能操作）this.markLine = {symbol: 'none', // 标线起始点去除lineStyle: {normal: {type: 'dashed',	// 标线样式color: '#FF0000', // 标线颜色symbol: 'none' // 标线结尾取消箭头}},// 标线结尾去掉文本label:{formatter: ''},// 警戒线data: [{name: '平均线',type: 'average', 平均线yAxis: 50， // 设定标线位置}],}this.markPoint = {data: [{name: '最大值',type: 'max'}]}return{chartExtend： {series：{// 启动背景阴影showBackground: true,// 背景阴影颜色backgroundStyle: {color: "#172047"},// 柱子大小barWidth: '50%',// 折线图样式smooth: false,// 去掉旁边0值boundaryGap: false,// 去掉Y轴下面的刻度axisTick: {inside: true},// 背景颜色backgroundColor:'red',// 设置柱形边角样式itemStyle: {barBorderRadius:[10,10,10,10]}},// 图表渲染模型是否启用提示具体数据label: {show: true,position: 'insideLeft'}},label: {normal: {show: true,position: 'insideLeft'},color: 'red',formatter: (res)=>{let data= res.namereturn data;}},}}}}
</script>

水球图：

<ve-liquidfill height="76px" :data="chartData" :settings="chartSettings"></ve-liquidfill>

<script>import VeLiquidfill from 'v-charts/lib/liquidfill.common'export default {data(){this.chartSettings = {outline: {show: true},seriesMap: [{label: {fontSize: 12,formatter (options) {const {seriesName,data: {value}} = optionsreturn `${seriesName}\n${value}`},},center: ['20%', '50%'],radius: '90%',outline: {show: false}},{label: {fontSize: 12},center: ['50%', '50%'],radius: '90%',outline: {show: false}},{label: {fontSize: 12},center: ['80%', '50%'],radius: '90%',// 去掉外环outline: {show: false}}]}return {chartData: {columns: ['city', 'percent'],rows: [{city: '上海',percent: 0.4}, {city: '广州',percent: 0.4}, {city: '成都',percent: 0.4}]}}}}
</script?

环形图：

<ve-ring :data="chartData" :height="height" :legend-visible="false" :extend="chartExtend" :settings="chartSettings" ></ve-ring>

import VeRing from "v-charts/lib/ring.common";
data() {return {// 图表原生设置chartExtend: {series: {// 线的样式labelLine: {length: 50,// 第二条线length2: 5,lineStyle: {// 线的大小width: 1}},label: {normal: {// 是否显示扇叶show: true,position: 'insideLeft',// 文字大小fontSize: 14}},// 位置center: ['50%', '55%'],// 大小radius : ['10%', '45%'],}},chartSettings: {roseType: 'radius'}};},

散点图：

<div><ve-scatter :height="height" :extend="extend" :data="chartData_speed" :axisVisible="true" :settings="settings" :data-empty="traffic" :loading="is_nowSpeed"></ve-scatter></div>

data() {
this.settings= {xAxisType: "time",labelMap: {time: this.$t("lightings.trafficFlow.time"),speed: this.$t("lightings.trafficFlow.speed")},// 散点大小symbolSize: 4,legendName: {'speed': this.$t("lightings.trafficFlow.speed")}}
}

日常开发图表中，v-chatrs中的方法，有很多基本都是通用