最近项目做到图表部分，需要用到echarts，但是之前没怎么接触过，所以就 浅浅记录一下，先来看个效果图：
首先第一步先去echarts官网下载并保存echarts.js 文件，然后在所需页面引用
//vue引用
import * as echarts from 'echarts';
//h5引用
<script src="echarts.js"></script>后面直接粘就行（html）
//折线一体图
<div id="TrendCharts" style="height: 614px;"></div>
//半圆进度条
<div id="middleContent1ChartsWc" style="height: 150px;"></div>js(折线一体图)
mounted() { //进入页面生成
this.charts1wc() //半圆环进度条
this.Trendcharts() //分析趋势图
},
Trendcharts(){ //生成折线一体图
var chartDom = document.getElementById('TrendCharts');
var myChart = echarts.init(chartDom);
window.addEventListener("resize", function () { //页面自适应
myChart.resize();
});
let xujianL=[10,30,20,50,70,66,99,43,22,55,13,77]
let xujianC=[1000,350,2280,5140,7860,6256,9849,4793,2562,5445,1283,7557]
let yingjianC=[1120,5230,8620,4450,3770,1066,2099,8943,7755,1325,7967,5562]
let xinzengC=[5810,3450,8920,5650,4170,1066,7799,6343,5622,8955,7813,4477]
// 向上取整十，整百，整千，整万
const formatInt=(num,prec=2,ceil=true)=>{ //数字 取整位数 向上或者向下取整
const len=String(num).length;
if(len<=prec){returnnum};
const mult=Math.pow(10,prec);
return ceil?Math.ceil(num/mult)*mult:Math.floor(num/mult)*mult;
}
//formatInt(2345,2,true)->2400
//formatInt(2345,2.false)->2300
//formatInt(2345,3,true)->3000
//formatInt(2345,3,false)->2000
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
// toolbox: { //功能按钮
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
legend: {
data: ['春', '夏', '秋', '冬']
},
xAxis: [
{
type: 'category',
data: ['子'、'丑'、'寅'、'卯'、'辰'、'巳'、'午'、'未'、'申'、'酉'、'戌'、'亥'],
axisPointer: {
type: 'shadow'
},
axisLine:{ //去除刻度线
show:false,
},
axisTick:{
show:false
},
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#828282",
}
},
splitLine: {//网格线配置
show:false,
lineStyle: {
type: "dashed"
}
},
}
],
yAxis: [
{
type: 'value',
name: '℃', //单位
nameTextStyle:{//y轴上方单位的颜色
color:'#828282'
},
nameGap: '20',
min: 0,
max: formatInt(Math.max(...yingjianC),3,true) + 1000, //取最大值并向上取整 并加1000 (封顶值)
interval: (formatInt(Math.max(...yingjianC),3,true) + 1000) / 10, //(每段间隔)
axisLabel: {
formatter: '{value}'
},
axisLine:{ //去除刻度线
show:false
},
axisTick:{
show:false
},
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#828282",
}
},
splitLine: { //网格线
show: true,
lineStyle:{
type:'dashed'
}
}
},
{
type: 'value',
name: '%', //单位
nameTextStyle:{//y轴上方单位的颜色
color:'#828282'
},
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value}'
},
axisLine:{
show:false
},
axisTick:{
show:false
},
axisLabel: {//轴文字的配置
show: true,
textStyle: {
color: "#828282",
}
},
splitLine: {
show: true,
lineStyle:{
type:'dashed'
}
}
}
],
series: [
{
name: '续检率',
type: 'line', //类型 折线
// symbol: true, //折点显示设置为true，隐藏设置为none
// smooth: true, // 让曲线变平滑的
color:['#0086ff'], // 拐点颜色
// symbol: 'circle', // 拐点样式
// symbolSize: 5, // 拐点大小
itemStyle: { // 设置折线渐变色
color: '#0086ff',
normal: {
lineStyle: {
width: 2, // 折线宽度
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 1, color: '#00fefb'},
{offset: 0, color: '#0086ff'}
]),
},
// label:{
// show:false, //折点处显示数据
// textStyle:{
// color:'#fff', //字体颜色
// fontSize:9 //字体大小
// }
// }
}
},
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: xujianL
},
{
name: '续检车辆',
type: 'bar',
barWidth: 5, //柱体宽度
itemStyle: { //柱体颜色
normal: {
color:"#2ecbab", //单一颜色
// color: function (params) { //循环颜色
// //自定义颜色
// var colorList = [
// '#5f9fef', '#988C70', '#29C74B', '#20B9C5', '#0068DE'
// ];
// return colorList[params.dataIndex]
// }
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: xujianC
},
{
name: '应检车辆',
type: 'bar',
barWidth: 5,
itemStyle: { //柱体颜色
normal: {
color:"#ef765f", //单一颜色
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: yingjianC
},
{
name: '新增车辆',
type: 'bar', //类型 柱状
barWidth: 5,
itemStyle: { //柱体颜色
normal: {
color:"#5f9fef", //单一颜色
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: xinzengC
},
]
};
option && myChart.setOption(option);
}js(半环形进度条)
charts1wc() { //半圆环进度条
let middleContent1Charts = document.getElementById("middleContent1ChartsWc");
let myChart = echarts.init(middleContent1Charts);
window.addEventListener("resize", function () {
myChart.resize();
});
// myChart.clear();
let option = {
backgroundColor: '#ffffff',
title: [{
text: '数据',
top: '65%',
x: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 20,
color: '#333333'
},
show: false,
}],
angleAxis: {
show: false,
max: 180, //-45度到225度，二者偏移值是270度除360度
type: 'value',
startAngle: 180, //极坐标初始角度
endAngle: 0,
splitLine: {
show: false
}
},
barMaxWidth: 15, //圆环宽度
radiusAxis: {
show: false,
type: 'category',
},
//圆环位置和大小
polar: {
center: ['50%', '75%'],
radius: document.body.offsetWidth>1440?'240':'200' //页面分辨率
},
series: [{
type: 'bar',
center: ['50%', '50%'],
data: [{ //上层圆环，显示数据
value: this.value && parseInt(this.value) || '0', //进度条数值
itemStyle: {
color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
type: 'linear',
x: 0,
y: 0,
x2: 1, //从左到右 0-1
y2: 0,
colorStops: [{
offset: 0,
color: '#0B64E9'
}, {
offset: 1,
color: '#0B64E9'
}],
},
},
}],
barGap: '-100%', //柱间距离,上下两层圆环重合
coordinateSystem: 'polar',
roundCap: true, //顶端圆角
z: 2,//圆环层级，同zindex
},
{ //下层圆环，显示最大值
type: 'bar',
data: [{
value: 90,
itemStyle: {
color: '#EBEBEB',
emphasis: {
color: '#e2e2e2',
}
},
}],
center: ['50%', '50%'],
barGap: '-100%',
coordinateSystem: 'polar',
roundCap: true,
z: 1,
},
{
name: 'AQI',
type: 'gauge',
center: ['50%', '50%'],
startAngle: 180, //起始角度，同极坐标
endAngle: 0, //终止角度，同极坐标
axisLine: {
show: false,
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLabel: {
show: false
},
pointer: {
show: false
},
title: {
offsetCenter: ['-10', 0],
color: '#0B64E9',
fontSize: 40,
fontWeight: 800,
rich: {
'a': {
color: '#0B64E9',
fontSize: 16,
fontWeight: 800,
}
},
},
detail: {
fontSize: 25,
offsetCenter: ['55%', '0'],
fontWeight: 800,
formatter: '%',
color: '#0B64E9'
},
data: [{
value: this.value && parseInt(this.value) || '0',//进度条数值
name: this.value && parseInt(this.value) || '0',//进度条数值
}]
}
]
}
option && myChart.setOption(option);
// myChart.setOption(option, true);
// this.myChart1wc = myChart;
},半圆环进度条这块是同事做的，时间比较急就搬过来了，做完之后感觉是挺繁琐的，如果有别的选择尽量能不用这个还是不用这个，后期如果有机会我会重新发一版半圆环进度条生成.好啦，这期记录就先到这里！
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
