ehcarts vue 水球图、边框四个角样式页面布局

tech2026-04-11 1

echarts+element+vue 水球图和一些css小样式（四个边框角）

1、引入echarts

npm install echarts -s npm install echarts-liquidfill -s

2、main.js

import echarts from "echarts"; Vue.prototype.$echarts = echarts; import 'echarts-liquidfill'

3、页面调用

// 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("main")); // 指定图表的配置项和数据 let option = { backgroundColor: 'rgb(3,16,84)', title: { text: '', textStyle: { color:'#fff', fontWeight: 'bold', fontSize: 18 } }, series: [{ type: 'liquidFill', radius: '80%', center: ['50%', '50%'], data: [0.6, 0.55, 0.5, 0.45], // data个数代表波浪数 backgroundStyle: { borderWidth: 1, // color: 'rgb(223,242,250)' }, label: { normal: { color: 'red', insideColor: '#f2f2f2', fontSize: 20, formatter:'水温13.1℃\n------\nPH:6.6' } } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 基于准备好的dom，初始化echarts实例 let myCharts = this.$echarts.init(document.getElementById("mains")); // 指定图表的配置项和数据 var colors = ['#ff0000', '#00ff00']; let options = { backgroundColor: 'rgb(3,16,84)', color: colors, grid: { top: '40', bottom:'40' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: '#333333' }, }, axisLabel: { textStyle: { color: '#fff', //更改坐标轴文字颜色 fontSize : 14 //更改坐标轴文字大小 } }, data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'] } ], yAxis: [ { type: 'value', name: '水温', min: 0, max: 40, position: 'left', axisLine: { lineStyle: { color: '#333333' } }, axisLabel: { formatter: '{value} °C', textStyle: { color: '#fff', //更改坐标轴文字颜色 fontSize : 14 //更改坐标轴文字大小 } }, splitNumber:1 }, { type: 'value', name: 'PH值', min: 0, max: 10, position: 'right', axisLine: { lineStyle: { color: '#333333' }, }, axisLabel: { textStyle: { color: '#fff', //更改坐标轴文字颜色 fontSize : 14 //更改坐标轴文字大小 } }, splitNumber:1 } ], series: [ { name: '水温', type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 16.7, 15.6, 12.2, 32.6, 20.0, 6.4, 3.3, 6.4, 3.3] }, { name: 'PH值', type: 'line', yAxisIndex: 1, data: [2.0, 7.2, 3.3, 4.5, 6.3, 1.2, 2.3, 3.4, 3.0, 6.5, 2.0, 6.2, 2.0, 6.2] } ] }; // 使用刚指定的配置项和数据显示图表。 myCharts.setOption(options);

template

<template> <div id="app"> <div class="main_content"> <div class="container"> <div class="angle angle-right-top"></div> <div class="angle angle-right-bottom"></div> <div class="angle angle-left-top"></div> <div class="angle angle-left-bottom"></div> <div class="wrap_content"> <p class="title">水箱水质</p> <div id="main" style="width: 200px;height:200px;"></div> </div> <div class="wrap_content wright"> <p class="title">14日水质变化趋势图</p> <div id="mains" style="width: 520px;height:200px;"></div> </div> </div> <div class="container fl1"> <div class="angle angle-right-top"></div> <div class="angle angle-right-bottom"></div> <div class="angle angle-left-top"></div> <div class="angle angle-left-bottom"></div> </div> <div class="container fl1"> <div class="angle angle-right-top"></div> <div class="angle angle-right-bottom"></div> <div class="angle angle-left-top"></div> <div class="angle angle-left-bottom"></div> </div> </div> </div> </template>

css

最新回复(0)