赞
踩
环境:vue2 + element-ui
echarts版本:5.4.0
安装:
npm install echarts --save
需要的页面引用:
import * as echarts from 'echarts';
先上一个效果图(有借鉴copy网上的内容,忘了哪个了)
页面准备容器
<div id="fftjChart"></div>
js部分,我是在父组件中拿到的数据,传递给子组件
- <script>
- import * as echarts from "echarts";
- export default {
- // 组件传参,拿到父组件传递的数据
- props: {
- greenTraffic: {
- type: Array,
- default() {
- return [];
- },
- },
- },
- data() {
- return {
- arrX: [],
- arrY: [],
- };
- },
- watch: {
- // 侦听父组件的数据,发生变化后处理数据后重新渲染dom
- greenTraffic: {
- handler(val) {
- this.arrX = [];
- this.arrY = [];
- if (Array.isArray(val) && val.length) {
- val.forEach((item) => {
- this.arrX.push(item.trafficKey);
- this.arrY.push((Number(item.trafficValue) / 10000).toFixed(2));
- });
- }
- this.drawFftjChart();
- },
- deep: true,
- },
- },
- mounted() {
- this.drawFftjChart();
- },
- methods: {
- drawFftjChart() {
- let yData = this.arrY;
- var fftjChart = echarts.init(document.getElementById("fftjChart"));
- fftjChart.setOption({
- grid: { // 容器距离
- left: "5%",
- right: "5%",
- // top: "5%",
- bottom: "5%",
- containLabel: true,
- },
- tooltip: {
- trigger: "item",
- formatter: function (parms) {
- return (
- parms.marker + " " + parms.name + ":" + parms.value + "万辆"
- );
- },
- },
- xAxis: {
- type: "category", // category(坐标轴类型)
- data: this.arrX,
- axisTick: {
- // 坐标轴刻度相关配置
- show: true, // 是否显示坐标轴刻度
- },
- axisLine: {
- // 坐标轴轴线相关配置
- lineStyle: {
- // 坐标轴轴线样式
- color: "#666666", // 坐标轴轴线颜色
- },
- },
- axisLabel: {
- // 坐标轴刻度标签相关配置
- color: "#fff",
- fontSize: 14,
- margin: 20,
- },
- },
- yAxis: {
- type: "value", // value(数值轴,适用于连续数据)
- name: "单位:万辆",
- nameTextStyle: {
- color: "#fff",
- fontSize: 12,
- },
- axisTick: {
- // 坐标轴刻度相关配置
- show: true, // 是否显示坐标轴刻度
- },
- axisLine: {
- // 坐标轴轴线相关配置
- show: true, // 是否显示坐标轴轴线
- },
- axisLabel: {
- // 坐标轴刻度标签相关配置
- color: "#fff",
- fontSize: 14,
- },
- splitLine: {
- // 坐标轴在 grid 区域中的分隔线
- lineStyle: {
- // 分割线配置
- color: "rgba(255,255,255,0.15)", // 分割线颜色
- },
- },
- },
- series: [
- // 底部的椭圆形(象形柱图):pictorialBar
- {
- type: "pictorialBar", // pictorialBar(象形柱图)
- label: {
- // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
- // show: true, //是否显示标签
- position: ["17", "-30"], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
- color: "#01E4FF",
- fontSize: 14,
- },
- symbolSize: [30, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
- symbolOffset: [0, 10], // 图形相对于原本位置的偏移
- z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
- itemStyle: {
- // 图形样式
- // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
- // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- // 这里 offset: 0 1 ,表示从下往上的渐变色
- {
- offset: 0, // 0%处的颜色
- color: "rgba(31,155,255,1)",
- },
- {
- offset: 1, // 100%处的颜色
- color: "#1F61EA",
- },
- ]),
- },
- data: yData,
- },
- // 中间的长方形柱状图(柱状图):bar
- {
- type: "bar", // 柱状图
- barWidth: 30, // 柱条的宽度,不设时自适应
- barGap: "0%", // 柱子与柱子之间的距离
- itemStyle: {
- // 图形样式
- // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
- // 下面就是使用线性渐变
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- type: "linear",
- global: false,
- colorStops: [
- {
- offset: 0, // 0%处的颜色
- color: "rgba(34,68,172,0.9)",
- },
- {
- offset: 1, // 100%处的颜色
- color: "rgba(0,183,255,0.8)",
- },
- ],
- },
- },
- data: yData,
- },
- // 顶部的椭圆形(象形柱图):pictorialBar
- {
- type: "pictorialBar",
- symbolSize: [30, 20],
- symbolOffset: [0, -10],
- z: 12,
- symbolPosition: "end",
- itemStyle: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(31,155,255,0.8)",
- },
- {
- offset: 1,
- color: "rgba(0,229,255,0.5)",
- },
- ],
- false
- ),
- },
- data: yData,
- },
- ],
- });
- window.addEventListener("resize", () => {
- fftjChart.resize();
- });
- },
- },
- };
- </script>
下一篇整理,3D饼状图
工作记录,有不足之处还请见谅,还望指出,感谢!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。