当前位置：首页 > news >正文

江门做网站公司网络运营培训班

news 2025/8/7 2:25:52

江门做网站公司,网络运营培训班,用照片做模板下载网站好,wordpress ormECharts：一个基于 JavaScript 的开源可视化图表库。目录效果一、介绍 1、官方文档：Apache ECharts 2、官方示例二、准备工作 1、安装依赖包 2、示例版本三、使用步骤 1、在单页面引入 echarts 2、指定容器并设置容器宽高 3、数据处理&am…

ECharts：一个基于 JavaScript 的开源可视化图表库。

效果

一、介绍

1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

2、示例版本

三、使用步骤

1、在单页面引入 ' echarts '

2、指定容器并设置容器宽高

3、数据处理（关键点）

四、完整示例

tips

xAxis. interval  试一试

效果

一、介绍

1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

二、准备工作

1、安装依赖包

npm install echarts --save

2、示例版本

"echarts": "^5.4.2",

三、使用步骤

1、在单页面引入 ' echarts '

import * as echarts from "echarts";

注：上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

2、指定容器并设置容器宽高

<template><div id="main"></div>
</template><script>import * as echarts from "echarts";export default {name: "mutiYAxis",data() {return {};},methods: {initChart() {let data = this.datalet chartDom = document.getElementById("main");let myChart = echarts.init(chartDom);let option;...详见完整示例   },},};
</script><style scoped>#main {width: 1000px;height: 500px;}
</style>

3、数据处理（关键点）

1）数据格式为一维数组

dataList: [[0, 221.6503],[35.564, 198.3526],[68.154, 168.4582],[108.124, 145.4562],[136.357, 128.1254],[158.354, 99.6574],[227.137, 58.5234],[268.854, 36.8563],[324.358, 21.2563],[385.135, 11.7854],[462.568, 0.35413]
]

2）X轴type设为value

xAxis: [{name: 'xAxisName',nameLocation: 'center',nameGap: 40,type: 'value',boundaryGap: false......}]

3) X轴固定间隔并向上取整十位数 + 设置最大值和最小值

向上取整的更多示例请看这里 =》CSDN

let xMax = Math.ceil(dataList[dataList.length - 1][0] / 20) * 20;xAxis: [{name: 'xAxisName',nameLocation: 'center',nameGap: 40,type: 'value',boundaryGap: false,min: 0,    max: xMax,     interval: 20, // 无法在类目轴中使用。......}]

4） dataZoom的type设为inside

dataZoom: [{type: 'inside' // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
}]

5) toolbox的feature的dataZoom即使是空对象也要保留，否则会没有缩放icon

toolbox: {show: true,feature: {// dataZoom 空对象也要保留，否则会没有缩放icondataZoom: {},restore: {show: true}},right: '2%',
}

注：部分方法/数据的完整版在完整示例展示

四、完整示例

<template><div class="typeValue"><div id="main"></div></div>
</template><script>
import * as echarts from "echarts";export default {name: "typeValue",data() {return {result: {dataList: [[0, 221.6503],[35.564, 198.3526],[68.154, 168.4582],[108.124, 145.4562],[136.357, 128.1254],[158.354, 99.6574],[227.137, 58.5234],[268.854, 36.8563],[324.358, 21.2563],[385.135, 11.7854],[462.568, 0.35413],],seriesName: '名称'},};},mounted() {this.$nextTick(() => {this.initChart(this.result);});},methods: {initChart(data) {let chartDom = document.getElementById("main");let myChart = echarts.init(chartDom);let option;const { dataList, seriesName } = data;if (dataList === null || dataList.length === 0) return;let legendData = [];legendData.push(seriesName);let xMax = Math.ceil(dataList[dataList.length - 1][0] / 20) * 20;option = {title: {left: '10%',top: '3%',text: 'title',},grid: {left: '12%'},toolbox: {show: true,feature: {// dataZoom 空对象也要保留，否则会没有缩放icondataZoom: {},restore: {show: true}},right: '2%',},tooltip: {trigger: "axis",borderColor: 'rgba(226,231,234,0.75)',borderRadius: 4,backgroundColor: 'rgba(240,244,248,0.75)',textStyle: {color: '#333',fontSize: 13},formatter: function (params) {const { data } = params[0]return `(${data[0]}, ${data[1]})`;},},legend: {type: "scroll",data: legendData,textStyle: {color: "#999"}},xAxis: [{name: 'xAxisName',nameLocation: 'center',nameGap: 40,type: 'value',boundaryGap: false,min: 0,    max: xMax,     interval: 20, // 无法在类目轴中使用。boundaryGap: false,axisLabel: {show: true,},splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: true,}}],yAxis: [{type: 'value',boundaryGap: [0, '100%'],name: 'yAxisName',nameLocation:'center',nameGap: 40,splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: true,},axisLine: {show: true,},}],series: [{name: data.seriesName,type: "line",symbol: 'none',sampling: 'lttb',itemStyle: {color: 'rgb(255, 70, 131)'},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 158, 68)'},{offset: 1,color: 'rgb(255, 70, 131)'}])},data: dataList,}],dataZoom: [{type: 'inside' // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。}]};option && myChart.setOption(option);},},
}
</script><style lang="less" scoped>
#main {width: 1000px;height: 500px;
}
</style>