<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">script>
<div id='app' style="width: 600px;height: 400px">div>
var myCharts = echarts.init(document.getElementById('app'))
var option = {
xAxis: {
type: 'category',
data: ['测试', '研发', '产品']
},
yAxis: {
type: 'value'
},
series: [
{
name: '岗位',
type: 'bar',
data: [10, 90, 20]
}
]
}
myCharts.setOption(option)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts快速上手title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">script>
head>
<body>
<div id='app' style="width: 600px;height: 400px">div>
<script>
// 步骤3:初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var mCharts = echarts.init(document.getElementById('app'))
// 步骤4:准备配置项
var option = {
xAxis: {
type: 'category',
data: ['测试', '研发', '产品']
},
yAxis: {
type: 'value'
},
series: [
{
name: '岗位',
type: 'bar',
data: [10, 90, 20]
}
]
}
// 步骤5:将配置项设置给echarts实例对象
mCharts.setOption(option)
script>
body>
html>
官方配置项使用文档
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts快速上手title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">script>
head>
<body>
<div id='app' style="width: 600px;height: 400px">div>
<script>
// 步骤3:初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var myCharts = echarts.init(document.getElementById('app'))
// 步骤4:准备配置项
var option = {
xAxis: {
type: 'category', // 类目轴
data: ['测试', '研发', '产品']
},
yAxis: {
type: 'value' // 数值轴
},
title: {
text: '岗位', // 标题文本
link: 'https://blog.csdn.net/IT_heima', // 标题超链接
target: 'blank', // 打开新窗口, self: 当前窗口
textStyle: { // 文字样式
color: 'pink', // 颜色
fontWeight: 'bold' // 字体粗细
}
},
series: [
{
name: '岗位',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: [10, 90, 20]
}
]
}
// 步骤5:将配置项设置给echarts实例对象
myCharts.setOption(option)
script>
body>
html>