echarts 柱状图 |
您所在的位置：网站首页 › 条形图是柱状图吗 › echarts 柱状图 |
echarts 柱状图
|
这个案例是结合Vue的2.6+版本和echarts的5.4版本来结合使用的。 一、安装方式从 npm 获取 npm install echarts --save 引入（现在的版本就是通过这种方式引入） import * as echarts from ‘echarts’; 二、代码 import * as echarts from "echarts"; import resize from "../mixins/resize"; export default { mixins: [resize], props: { className: { type: String, default: "chart3", }, id: { type: String, default: "chart3", }, width: { type: String, default: "300px", }, height: { type: String, default: "300px", }, }, data() { return { chart: null, dataList: [], mTime: null, index: -1, option: null, }; }, mounted() { this.initChart(); this.$nextTick(() => { window.addEventListener("resize", () => { this.chart.resize(); }); }) }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, methods: { initChart() { this.chart = echarts.init(document.getElementById(this.id)); this.dataList = [200, 334, 390, 330, 220] this.mapActive(); this.mouseEvents(); this.option = { // 提示框组件。 tooltip: { trigger: "axis", // 触发类型。 'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 backgroundColor: "rgba(0,0,0,0.4)", // 提示框浮层的背景颜色。 borderColor: "rgba(0,0,0,0.4)", // 提示框浮层的边框颜色。 // 坐标轴指示器配置项。 axisPointer: { type: "shadow", // 指示器类型。 'line' 直线指示器; 'shadow' 阴影指示器; 'none' 无指示器; 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。 // 坐标轴指示器的文本标签。 label: { show: true, // 是否显示文本标签。如果 tooltip.axisPointer.type 设置为 'cross' 则默认显示标签，否则默认不显示。 backgroundColor: "#7B7DDC", // 文本标签的背景颜色，默认是和 axis.axisLine.lineStyle.color 相同。 }, }, // 提示框浮层的文本样式。 textStyle: { color: "#fff", }, }, // 直角坐标系内绘图网格 grid: { left: "1%", // grid 组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right' right: "1%", // 同上 bottom: "3%", // 同上 // grid 区域是否包含坐标轴的刻度标签。 containLabel 为 true 的时候: // 1.grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。 // 2.这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。 containLabel: true, }, color: ["#ff9f7f"], // 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 // 直角坐标系 grid 中的 x 轴 xAxis: [ { // 1.'value' 数值轴，适用于连续数据 // 2.'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。 // 3.'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 // 4.'log' 对数轴。适用于对数数据。 type: "category", // 坐标轴类型。 // 类目数据，在类目轴（type: 'category'）中有效。 data: [ "户籍中低收入家庭", "外来务工人员", "新就业无房职工", "高层次人才", "其他", ], // 坐标轴刻度相关设置 axisTick: { alignWithLabel: true, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。 }, // 坐标轴刻度标签的相关设置。 axisLabel: { fontSize: 12, color: "#fff", interval: 0, //坐标轴刻度标签的显示间隔，在类目轴中有效。 // rotate: 40, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。 }, }, ], // 直角坐标系 grid 中的 y 轴 yAxis: [ { // 1. 'value' 数值轴，适用于连续数据。 // 2. 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。 // 3. 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 // 4. 'log' 对数轴。适用于对数数据。 type: "value", // 坐标轴类型。 // 修饰刻度标签的颜色 axisLabel: { color: "#fff", }, // 修改y轴分割线的颜色 splitLine: { lineStyle: { color: "#012f4a", }, }, }, ], series: [ { name: "总人数", // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 type: "bar", barWidth: "30%", // 柱条的宽度，不设时自适应。 data: this.dataList, // 系列中的数据内容数组。数组项通常为具体的数据项。 // 单个数据的图形样式设置。 itemStyle: { // 5.4 版本的好像没有这个配置了 normal: { label: { show: true, color: '#fff' }, // 柱条的颜色。 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(0,244,255,1)", // 0% 处的颜色 }, { offset: 1, color: "rgba(0,77,167,1)", // 100% 处的颜色 }, ], false ), borderRadius: [30, 30, 30, 30], // 圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 shadowColor: "rgba(0,160,221,1)", // 阴影颜色。支持的格式同color。 shadowBlur: 4, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 }, }, }, ], } this.option && this.chart.setOption(this.option); }, mapActive() { const dataLength = this.dataList.length; // 用定时器控制高亮 this.mTime = setInterval(() => { // 清除之前的高亮 this.chart && this.chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: this.index, }); this.index++; // 当前下标高亮 this.chart && this.chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: this.index, }); this.chart && this.chart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: this.index, }); if (this.index > dataLength) { this.index = 0; } }, 3000); }, mouseEvents() { // 鼠标划入 this.chart && this.chart.on("mouseover", () => { // 停止定时器，清除之前的高亮 clearInterval(this.mTime); this.mTime = ""; this.chart && this.chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: this.index, }); }); // 鼠标划出重新定时器开始 this.chart && this.chart.on("mouseout", () => { this.mapActive(); }); }, }, }; #MixCharts { width: 100%; height: 100%; } 三、图片展示
封装两个方法。 method: { mapActive() { const dataLength = this.dataList.length; // 用定时器控制高亮 this.mTime = setInterval(() => { // 清除之前的高亮 this.chart && this.chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: this.index, }); this.index++; // 当前下标高亮 this.chart && this.chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: this.index, }); this.chart && this.chart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: this.index, }); if (this.index > dataLength) { this.index = 0; } }, 3000); }, mouseEvents() { // 鼠标划入 this.chart && this.chart.on("mouseover", () => { // 停止定时器，清除之前的高亮 clearInterval(this.mTime); this.mTime = ""; this.chart && this.chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: this.index, }); }); // 鼠标划出重新定时器开始 this.chart && this.chart.on("mouseout", () => { this.mapActive(); }); }, }封装两个方法，然后放到echarts的配置里面，如果要改变滚动的数据，可以去改 tooltip（提示框组件）这个配置。 |
【本文地址】
今日新闻 |
推荐新闻 |