接到了一个水球图的需求,如上图所示,点击不同的水球,下面的进度条呈现不同维度的百分比情况 。
- npm install echarts
- npm install echarts-liquidfill
注意在这里需要查看echarts版本是4还是5,echarts@5的版本与echarts-liquidfill@3兼容,echarts@4的版本与echarts-liquidfill@2兼容,如果版本不对应,会报错!!!因为我踩坑了😂我的echarts版本是4.9.0,装的依赖是最新版的,也就是echarts-liquidfill@3,后来就报错了,然后看官网发现得用2的,我就下载了echarts-liquidfill@2.0.6版本的。
报错1:echart--Uncaught Error: Component series.wordCloud not exists. Load it first.
解决办法:先检查echarts 和 echarts-liquidfill 是否安装 echarts 4.几的版本对应 liquidfill 2.0.6的版本
- import * as echarts from 'echarts';
- import 'echarts-liquidfill'
以下是我封装的简单粗糙的组件
- <template>
- <div>
- <div id="waterPoloChart" ref="waterPoloChart" :style="{ width: chartWidth, height: chartHeight }" />
- </div>
- </template>
- <script>
- import * as echarts from "echarts";
- import 'echarts-liquidfill'
- export default {
- props: {
- chartData: {
- type: Object,
- default: () => { },
- },
-
- chartWidth: {
- type: String,
- default: "",
- },
- chartHeight: {
- type: String,
- default: "",
- },
- },
- data () {
- return {
-
- };
- },
- created () {
- },
- computed: {
- chartOptions () {
- // let that = this
- const options = {
- title: {
- left: 'center',
- subtext: this.chartData.name,
- subtextStyle: { //文字样式
- color: "#fff",
- fontSize: 14,
- fontWeight: 600,
- // bottom: "center"
- },
- itemGap: 10, //主副标题间距
- bottom: 25,
- textStyle: {
- color: '#333',
- fontWeight: 'normal',
- fontSize: 14
- }
- },
- series: [{
- // name: '水球图',
- type: 'liquidFill',
- radius: '96%',
- center: ['50%', '50%'],
- waveAnimation: 10, // 动画时长
- amplitude: 20, // 振幅
- data: [this.chartData.value], // 使用合并后的数据
- // data: [0.7],//水球百分比
- color: 'rgba(68, 197, 253,1)',//设置波形颜色
- label: {
- normal: {
- color: '#fff',//百分比颜色
- textStyle: {
- fontSize: 16,
- fontWeight: 'normal'
- }
- }
- },
- outline: { //外边框
- show: false,
- borderDistance: 5,
- itemStyle: {
- borderColor: 'rgba(68, 197, 253,1)',
- borderWidth: 2
- }
- },
- backgroundStyle: { //水球背景色
- color: '#87cbfa'
- }
- }]
- }
- return options;
- }
- },
- mounted () {
- console.log(this.chartData, 'this.chartData')
- // this.$nextTick(() => {
- // this.initEcharts();
- if (this.chartData !== null && this.chartData !== undefined) {
- this.initEcharts();
- }
- // });
- },
- methods: {
- // initChart () {
- // const _this = this;
- // _this.waterPoloChart = echarts.init(this.$refs.waterPoloChart);
- // window.addEventListener("resize", function () {
- // _this.waterPoloChart.resize();
- // });
- // },
- initEcharts () {
- // 初始化echarts实例
- const _this = this;
- _this.waterPoloChart = echarts.init(this.$refs.waterPoloChart);
- // 显示图表
- _this.waterPoloChart.setOption(this.chartOptions);
- },
- }
- }
- </script>
- <style lang='less' scoped></style>
以下的是父组件,引入注册之后直接使用上面的组件 并且传入数据和水球图的宽高
- <template>
- <div class="compClass">
- <div class="compClass-kno">
- <h3>知识点掌握情况</h3>
- <div class="compClass-kno-bubble">
- <div style="display: flex;justify-content: center;" v-for="(item, index) in chartData" :key="index"
- @click="clickBubble(item)">
- <waterPoloChart :chartData="item" :chartHeight="chartHeight" :chartWidth="chartWidth">
- </waterPoloChart>
- </div>
- </div>
-
- <div class="compClass-kno-chart">
- <h3 style="color: #34BEEA;font-size: 20px;font-weight: 500;margin-bottom: 40px;">{{ knoChartTitle }}</h3>
- <div class="progress-status">
- <span>{{ title }}</span>
- <span id="progressBarContainer">
- <span id="progressBar" :style="{ width: progressBarWidth }"></span>
- </span>
- <span>{{ progressBarWidth }}</span>
- </div>
- </div>
-
- </div>
- </div>
- </template>
- <script>
- import waterPoloChart from '../components/waterPoloChart.vue'
- export default {
- components: {
- waterPoloChart,
- },
- data () {
- return {
- chartHeight: '138px',
- chartWidth: '138px',
- chartData: [
- { value: 0.5, name: "有理数", title: '无理数', cat: '50%' },
- { value: 0.6, name: "整数", title: '小数', cat: '60%' },
- { value: 0.2, name: "方程", title: '一元一次方程', cat: '20%' },
- { value: 0.7, name: "几何", title: '勾股定理', cat: '70%' },
- { value: 0.3, name: "实数", title: '实数1', cat: '30%' },
- { value: 0.9, name: "相交平行线", title: '平行线永不相交', cat: '90%' },
- ],
- knoChartTitle: '有理数',
- title: '整数',
- progressBarWidth: '50%'//进度条占比
-
- };
- },
- methods: {
- clickBubble (item) {
- this.knoChartTitle = item.name;
- this.title = item.title
- this.progressBarWidth = item.cat;
- console.log(this.progressBarWidth, '8888')
- },
- },
- };
- </script>
- <style lang="scss">
- .compClass {
- >div {
- background: #fff;
- margin-bottom: 16px;
- }
-
- &-kno {
- padding: 16px 20px;
-
- &-bubble {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- margin-top: 32px;
-
- >div {
- cursor: pointer;
- width: 33%;
- text-align: center;
- margin-bottom: 50px;
- }
- }
-
- &-chart {
- .progress-status {
- margin-bottom: 50px;
- display: flex;
- align-items: center;
-
- #progressBarContainer {
- display: inline-block;
- margin: 0 24px 0 12px;
- position: relative;
- width: 625px;
- // border: 1px #669CB8 solid;
- height: 20px;
- border-radius: 10px;
- background-color: #E1E9EE;
- // background: -webkit-gradient(linear, 0 0, 0 100%, from(#E1E9EE), to(white));
-
- #progressBar {
- position: absolute;
- top: 0;
- left: -1px;
- background-color: #7BC3FF;
- // width: 0%;
- height: 20px;
- border-radius: 10px;
- // transition: width 1s ease-in-out;
- }
- }
- }
- }
- }
-
- }
- </style>
粗糙的实现情况如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>水球图</title>
- <script type="text/javascript" src="echarts.min.js"></script>
- <script type="text/javascript" src="echarts-liquidfill.min.js"></script>
- </head>
- <body>
- <div id="app" style="width: 100%;height: 400px"></div>
-
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('app'));
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6]
- }]
- };
- myChart.setOption(option);
- </script>
- </body>
- </html>
2.1 多个波形
将多个波形表示出来,既可以表示多个数据,也可以提高图表的视觉效果。
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.5, 0.4, 0.3]
- }]
- };
0.6,0.5,0.4,0.3表示分别在60%,50%,40%,30%处各有一个波形
要几个波形,data值就写几个
2.2 设置波形的颜色,透明度
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.5, 0.4, 0.3],
- color: ['red', '#0f0', 'rgb(0, 0, 255)'],//设置波形颜色
- itemStyle: {
- opacity: 0.6//设置normal时候的透明度
- },
- emphasis: {
- itemStyle: {
- opacity: 0.9//设置hover时候的透明度
- }
- }
- }]
- };
或者
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.5, 0.4, {
- value: 0.3,
- itemStyle: {
- color: 'red',
- opacity: 0.6
- },
- emphasis: {
- itemStyle: {
- opacity: 0.9
- }
- }
- }]
- }]
- };
2.3 设置静态的波形
为了防止波浪向左或向右移动动画,将waveAnimation设置为false。禁用波浪上升的动画,设置animationDuration和animationDurationUpdate为0。
- var option = {
- series: [{
- type: 'liquidFill',
- waveAnimation: false,
- animationDuration: 0,
- animationDurationUpdate: 0,
- data: [0.6, 0.5, 0.4, 0.3]
- }]
- };
2.4 设置水平的静态波形
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.5, 0.4, 0.3],
- amplitude: 0,
- waveAnimation: 0//考虑性能,建议将该值设置false
- }]
- };
2.5 改变某个波形样式
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, {
- value: 0.5,
- direction: 'left',//波形向左移动
- itemStyle: {
- color: 'red'//波形颜色
- }
- }, 0.4, 0.3]
- }]
- };
direction: 设为 'left' 或 'right',指定波浪的移动方向
2.6 设置水球图背景色和内边框样式
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.5, 0.4, 0.3],
- backgroundStyle: {
- borderWidth: 5,//边框宽度
- borderColor: 'red',//边框颜色
- color: 'yellow'//背景色
- }
- }]
- };
2.7 设置外边框
- 设置outline.show为 false,隐藏外边框
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.5, 0.4, 0.3],
- outline: {
- show: false
- }
- }]
- };
2.8 设置水球图形状
设置shape值:
1) 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- var options = [{
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.5, 0.4, 0.3],
- shape: 'diamond'
- }]
- }];
2)'container':装满容器的形状。
- option = {
- series: [{
- type: 'liquidFill',
- data: [0.5, 0.4, 0.3, 0.2],
- shape: 'container',
- outline: {
- show: false
- }
- }]
- };
3)一个以'path://'开头的SVG路径。
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.55, 0.4, 0.25],
- radius: '60%',
- outline: {
- show: false
- },
- backgroundStyle: {
- borderColor: '#156ACF',
- borderWidth: 1,
- shadowColor: 'rgba(0, 0, 0, 0.4)',
- shadowBlur: 20
- },
- shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
- label: {
- position: ['38%', '40%'],
- formatter: function() {
- return 'ECharts\nLiquid Fill';
- },
- fontSize: 40,
- color: '#D94854'
- }
- }]
- };
2.9 动画
一般来说,在液体填充图中有两种类型的动画。
1)第一类是初始动画,具有起浪的效果。这个动画的easing方法由animationEasing控制,它的持续时间由animationDuration控制。
2)第二种类型是更新动画,通常在数据变化和波高变化时使用。它们由animationEasingUpdate和animationDurationUpdate控制。
例如,要禁用上升动画,并将动画更新时间设置为2秒,使用以下选项:
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.5, 0.4, 0.3],
- animationDuration: 0,
- animationDurationUpdate: 2000,
- animationEasingUpdate: 'cubicOut'
- }]
- };
- chart.setOption(option);
- setTimeout(function () {
- chart.setOption({
- series: [{
- type: 'liquidFill',
- data: [0.8, 0.6, 0.4, 0.2]
- }]
- })
- }, 3000);
2.10 改变文字
1)默认情况下,液体填充图的文本标签显示第一个数据的百分比。例如,对于数据为[0.6,0.5,0.4,0.3]的图表,默认文本为60%。
2)要更改文本,可以使用标签。格式化程序,可以设置为字符串或函数。
3)如果是字符串,{a}表示序列名,{b}表示数据名,{c}表示数据值。
- var option = {
- series: [{
- type: 'liquidFill',
- name: 'Liquid Fill',
- data: [{
- name: 'First Data',
- value: 0.6
- }, 0.5, 0.4, 0.3],
- label: {
- formatter: '{a}\n{b}\nValue: {c}',
- fontSize: 28
- }
- }]
- };
或者
- var option = {
- series: [{
- type: 'liquidFill',
- name: 'Liquid Fill',
- data: [{
- name: 'First Data',
- value: 0.6
- }, 0.5, 0.4, 0.3],
- label: {
- formatter: function(param) {
- return param.seriesName + '\n'
- + param.name + '\n'
- + 'Value:' + param.value;
- },
- fontSize: 28
- }
- }]
- };
文本位置默认位于center。label.position可以设置为'inside', 'left', 'right', 'top', 'bottom',或水平和垂直位置,例如:['10%','20%'],这意味着左边的'10%'(由label.align控制,可以设置'left', 'center', or 'right')和“20%”顶部(由label.baseline控制,可以设置 'top', 'middle', or 'bottom')。
2.11 阴影
默认情况下,波浪和轮廓有阴影。以下是如何改变它们的方法
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.5, 0.4, 0.3],
- itemStyle: {
- shadowBlur: 0
- },
- outline: {
- borderDistance: 0,
- itemStyle: {
- borderWidth: 5,
- borderColor: '#156ACF',
- shadowBlur: 20,
- shadowColor: 'rgba(255, 0, 0, 1)'
- }
- }
- }]
- };
2.12 提示框
添加tooltip,鼠标移入后的提示框信息显示
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6],
- name: 'Liquid Fill'
- }],
- tooltip: {
- show: true
- }
- };
2.13 点击事件
在waves上添加点击事件:
- chart.setOption(option);
- chart.on('click', function() {
- console.log(arguments);
- // do something useful here
- });
与其他图表类型一样,上述代码只会触发wave上的事件。如果你想在整个画布或特定元素上跟踪事件,你可以像这样在zrender中添加监听器:
- chart.getZr().on('click', function() {
- console.log(arguments);
- });
Non-interactable
要使一个元素(例如,一个波)非交互,只需将silent设置为true。
默认项参数
- {
- data: [],
-
- color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
- center: ['50%', '50%'],
- radius: '50%',
- amplitude: '8%',
- waveLength: '80%',
- phase: 'auto',
- period: 'auto',
- direction: 'right',
- shape: 'circle',
-
- waveAnimation: true,
- animationEasing: 'linear',
- animationEasingUpdate: 'linear',
- animationDuration: 2000,
- animationDurationUpdate: 1000,
-
- outline: {
- show: true,
- borderDistance: 8,
- itemStyle: {
- color: 'none',
- borderColor: '#294D99',
- borderWidth: 8,
- shadowBlur: 20,
- shadowColor: 'rgba(0, 0, 0, 0.25)'
- }
- },
-
- backgroundStyle: {
- color: '#E3F7FF'
- },
-
- itemStyle: {
- opacity: 0.95,
- shadowBlur: 50,
- shadowColor: 'rgba(0, 0, 0, 0.4)'
- },
-
- label: {
- show: true,
- color: '#294D99',
- insideColor: '#fff',
- fontSize: 50,
- fontWeight: 'bold',
-
- align: 'center',
- baseline: 'middle'
- position: 'inside'
- },
-
- emphasis: {
- itemStyle: {
- opacity: 0.8
- }
- }
- }
1)data里的每一项必须为0-1之间的值
2)data的每一项也可以是Object,设置单波形样式
- //设置第二波形为红色
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, {
- value: 0.5,
- itemStyle: {
- color: 'red'
- }
- }, 0.4, 0.3]
- }]
- };
设置波形颜色
color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF']
设置水球图形状
1)'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
2)一个以'path://'开头的SVG路径
水球图的位置。第一个值是x位置,第二个是y位置。每个值都可以是一个相对值,比如‘50%’,它是相对于容器宽度和高度的较小值,或者是一个绝对值,比如100px。
图表的半径,可以是一个相对值,如“50%”,这是相对于容器的宽度和高度的较小值,或一个绝对值,如“100px”。
水波的振幅,以像素或百分比表示。如果是百分比,那就是相对于直径。
水波的波长,可以是一个相对值,如“50%”,这是相对于直径,或绝对值,如“100px”或“100”。
弧度系统中波的相位。默认情况下,是auto即每一个波比前面一个波大`Math.PI / 4的相位。
向前移动一个波长所需的毫秒数。默认情况下,它被设置为“auto”即前面的波有更高的速度。
它也可以是一个函数格式。
- var option = {
- series: [{
- type: 'liquidFill',
- data: [0.6, 0.5, 0.4, 0.3],
- radius: '70%',
- phase: 0,
- period: function (value, index) {
- // This function is called four times, each for a data item in series.
- // `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.
- return 2000 * index + 1000;
- }
- }]
- }
水波移动的方向,可以设置为'right'或者'left'
是否允许水波向左移动或向右移动。
初始动画的缓动效果,例如当波从底部开始上升
数据更新动画的缓动效果,例如,当数据值变化和波的位置变化时。
初始动画的时长,单位为毫秒。
数据更新动画的时长,单位为毫秒。
是否显示外边框
外边框与内圈之间的距离。
外边框颜色
外边框宽度
外边框阴影的模糊大小
外边框阴影颜色
内圈背景色
内圈描边边框
内圈描边边框颜色
背景色阴影的模糊大小
背景色阴影的颜色
背景色的透明度
水波透明度
水波阴影的模糊大小
水波阴影的颜色
当鼠标移入后,水波的透明度
是否显示文本标签
文本标签的颜色(background上的)
文本标签的颜色(wave上的)即文本标签在wave上的颜色
文本标签的字体大小
文本标签的字体粗细
文本标签的对齐。 'left'
, 'center'
或 'right'
.
文本标签的垂直对齐方式, 'top'
, 'middle'
或 'bottom'
.
文本标签的位置,默认是center。值可以设置为 'inside'
, 'left'
, 'right'
, 'top'
, 'bottom'
或水平和垂直位置”(“10%”,“20%”)”,意思是“10%”的左边,“20%”。