一、echarts类型 ts
import * as echarts from 'echarts/core'; // 引入echarts核心组件
import { BarChart } from 'echarts/charts'; // 引入柱状图组件
import { TitleComponent, TooltipComponent } from 'echarts/components'; // 引入标题和提示框组件
import { CanvasRenderer } from 'echarts/renderers'; // 引入canvas渲染器
echarts.use([BarChart, TitleComponent, TooltipComponent, CanvasRenderer]); // 注册组件
const echartInstance = echarts.init(document.getElementById('main')); // 初始化echarts实例
const option = { // 配置项
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar',
},
],
};
echartInstance.setOption(option); // 绘制图表
echarts是一款非常强大的数据可视化库，其中的echarts类型ts则提供了更好的TypeScript支持。在使用echarts类型ts之前，需要先引入需要用到的组件，这里我们引入了柱状图组件、标题组件和提示框组件。接着，我们通过echarts.init方法初始化一个echarts实例，并通过setOption方法将图表配置项作为参数传入，最终绘制出一张柱状图。
二、echarts类型:category
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar',
},
],
};
echarts类型:category提供了对于类目型数据的支持。在这个示例中，我们将x轴类型设置为类目型，然后通过data属性设置x轴刻度的标签名。接下来我们设置y轴类型为值类型，然后通过series属性中的data字段设置每个数据点的值。
三、echarts类型:log
const option = {
xAxis: {
type: 'value',
scale: true,
axisLabel: {
formatter: function (value) {
return Math.pow(10, value).toFixed(0);
}
}
},
yAxis: {
type: 'value',
scale: true,
axisLabel: {
formatter: function (value) {
return Math.pow(10, value).toFixed(0);
}
}
},
series: [{
symbolSize: 10,
data: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]],
type: 'scatter'
}]
};
echarts类型:log提供了对于对数轴的支持。在这个示例中，我们设置x轴和y轴类型都为值型，并且将其都设置为对数轴。然后我们通过axisLabel字段设置轴标签的formatter函数，用于将对数轴上的刻度值转换为实际的值。最后我们配置了一个散点图，通过data字段设置每个散点的坐标。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/247751.html
微信扫一扫 
支付宝扫一扫 