echart 折线图lineStyle设置函数 echarts 折线图 legend

转载

字节墨海星 2024-06-28 10:27:54

文章标签 echarts vue.js javascript 图例数据 文章分类 架构后端开发

首先需要 npm install echarts 先安装到项目中
在 main.js 中引入Echarts import * as echarts from 'echarts'

这里需要注意的是：

安转的echarts版本在echarts5.0及以上版本使用：import echarts from 'echarts’引入时会报错，是因为安转的echarts版本过高导致的
改成：import * as echarts from ‘echarts’，或降低echarts版本

在UI结构中准备一个有宽高的盒子，再给一个id属性，用来放图表 <div class="right" id="line"></div>
基于准备好的盒子，在 methods 中定义一个方法，初始化echarts实例，举例：折线图

折线图配置项及数据的使用

// 折线图
lindCart(names, salary, trueSalary) {
	// 初始化echarts实例
	const myChart = this.$echarts.init(document.getElementById('line'))
	// 指定折线图表的配置项和数据
	const option = {
		// 如果有多条数据，希望图例和线的颜色保持一致，设置color即可
		color:['#80FFA5', '#00DDFF', '#FFBF00'],
		// 图表标题 
		title: {
			text: '薪资Salary',
			// 图表标题颜色
			textStyle: {
				color: '#6c757d'
			}
		},
		// 放到图表上的提示框
        tooltip: {
          trigger: 'axis'
        },
        // 图表上方的图例，需要和series中的name一致
        legend: {
          icon: 'rectangle', // 修改图例的样式(方块形状的)
          data: ['期望薪资', '实际薪资'],
          textStyle: {
            color: '#53f4ef', // 图例文字的颜色
            fontSize: 11 // 图例文字的大小
          }
        },
        // 网格
        grid: {
          y: 50, // y轴的高度
          left: '3%',
          right: '4%',
          bottom: '20%', // 网格距离底部的距离
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: names,
          axisLine: {
            lineStyle: {
               color: '#53f4ef' // 设置底部x轴颜色
             }
           }
        },
        yAxis: {
          type: 'value',
          axisLine: {
          	 show: true, // 显示Y轴线
             lineStyle: {
               color: '#53f4ef' // y轴上字体的颜色
             }
           },
           axisTick: {
             show: true // 显示y轴上的刻度线
           },
           splitLine: {
             lineStyle: {
               color: 'rgba(255, 255, 255, .3)' // 设置背景线颜色
             }
           }
        },
        // 用于区域缩放，可以拉动
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20
          },
          {
            start: 0,
            end: 20
          }
        ],
        // 两个对象，最终会显示出两条线
        series: [
          {
            name: '期望薪资',
            type: 'line', // 图表的类型
            stack: 'Total', // 如果有多条折线数据，最好stack的值是唯一的，或直接去掉stack，否则当多条数据的值一样时，会发生折线不会重复的问题
            data: salary,
            smooth: true, // 曲线
            color: '#5470C6' // 线的颜色
          },
          {
            name: '实际薪资',
            type: 'line',
            stack: 'Total',
            data: trueSalary,
            smooth: true,
            color: '#EE6666'
          }
        ]
      }
	// 使用指定的配置项和数据显示图表
	myChart.setOption(option)
}

使用数据可视化，最终里面的数据肯定是从后端接口拿到的，需要在 methods 中再定义方法去调接口拿数据，然后在这个方法里面调用定义图表的方法，然后以函数传参的形式，把从接口拿到的数据传参到定义图表的方法中
还是以上面的折线图示例，演示从接口拿到数据进行传参：

data(){
	return {
		lineData:[] // 折线图数据
	}
},
methods:{
	// 调接口，获取全部学生
	async getAllUser() {
	const { data: res } = await getAllUserApi()
		this.lineData = res
		// 学生姓名
		this.names = res.map(item => item.name)
		// 期望薪资
		this.salary = res.map(item => item.salary)
		// 实际薪资
		this.trueSalary = res.map(item => item.truesalary)
		// 调用折线图，并传递需要的数据
		this.lindCart(this.names, this.salary, this.trueSalary)
	}
}

柱状图配置项

// 柱状图
barCart(group, avgScore, lt, gt, gt80) {
	const myChart = this.$echarts.init(document.getElementById('bar'))
		const option = {
        title: {
          text: '成绩Score',
          textStyle: {
            color: '#6c757d'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['平均分', '低于60分人数', '60到80分之间', '高于80分人数']
        },
        xAxis: [
          {
            type: 'category',
            data: group,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0, // y轴值最小从0开始
            max: 100, // y轴值最大是100
            interval: 10, // y轴的值间隔10，比如：0 10 20 30 40 ......
            axisLabel: {
              formatter: '{value} 分' // y轴值的单位是分
            }
          },
          {
            type: 'value',
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value} 人'
            }
          }
        ],
        series: [
          {
            name: '平均分',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value
              }
            },
            data: avgScore,
            yAxisIndex: 0 // 该柱子以左侧y轴数据为基准，默认是0
          },
          {
            name: '低于60分人数',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value
              }
            },
            data: lt,
            yAxisIndex: 1 // 该柱子以右侧y轴数据为基准
          },
          {
            name: '60到80分之间',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value
              }
            },
            data: gt,
            yAxisIndex: 1 // 该柱子以右侧y轴数据为基准
          },
          {
            name: '高于80分人数',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value
              }
            },
            data: gt80,
            yAxisIndex: 1 // 该柱子以右侧y轴数据为基准
          }
        ]
      }
	myChart.setOption(option)
}

饼图配置项

// 饼图
pieCart(province) {
	const myChart = this.$echarts.init(document.getElementById('home'))
	const option = {
        title: {
          text: '籍贯Hometown',
          textStyle: {
            color: '#6c757d'
          }
        },
        // 放到饼图上的提示框，使用 formatter 可以支持html标签
        tooltip: {
          formatter: '{a} <br />{b} <strong>{c}</strong>人  {d}%'
        },
        series: [
          {
            name: '各地人员分布',
            type: 'pie',
            radius: [30, 120], // 饼图的半径
            center: ['50%', '50%'], // 饼图在盒子中的位置，50% 50% 表示在盒子中居中
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: province
          }
        ]
      }
	myChart.setOption(option)
}

在echarts中自定义legend图例
echarts提供的图例并不多，只有那么几种，一旦遇到原型图上展示的图例在echarts中没有时，就需要我们自定义一下了。
如果是图片格式，可以直接转换成base64，然后设置给legend中的icon属性，如下：

let option = {
	legend: {
		data: [
			{
				name: '图例名称1',
				icon: 'image://转换好的base64格式'
			},
			{
				name: '图例名称2',
				icon: 'image://转换好的base64格式'
			},
			{
				name: '图例名称2',
				icon: 'image://转换好的base64格式'
			}		
		],
		bottom: 2,
        textStyle: {
          color: '#fff'
        }
	}
}

如果图片是svg格式，我个人快捷的做法是，直接把下载好的svg图用PS打开，栅格化svg图，点击确定就可以，然后将图片导出为web所用格式，最后就可以转为base4格式使用了（主要是官网的svg用法不太看得懂o(╥﹏╥)o）。

echart 折线图lineStyle设置函数 echarts 折线图 legend_javascript