如何使用echarts写柱状图
一、echarts是什么?
商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
二、使用步骤
1.这是echarts官网
[https://echarts.apache.org/zh/index.html]
2 引入echarts.min.js到你的项目下面即可 直接再html调用此方法 如下
3 这是呈现的效果图
4 具体代码如下
<div id="chartmain" style="width: 100%; height: 212px;></div>
var xData = ["设备1", "设备2", "设备3", "设备4", "设备5"];
var line = ["275", "206", "168", "296", "150"];
var option = {
grid: {
left: "15%",
top: "14%",
right: "5%",
bottom: "13%",
},
legend: {
show: true,
icon: "circle",
orient: "horizontal",
top: "90.5%",
right: "center",
itemWidth: 10.5,
itemHeight: 3,
// itemGap: 30,
textStyle: {
// color: '#FFFFFF'
color: "#C9C8CD",
fontSize: 12,
},
},
xAxis: [{
data: xData,
axisLabel: {
textStyle: {
// 这是改变这个x轴文字 的颜色
color: "#CDEEF1",
fontSize: 11.4,
},
margin: 6, //刻度标签与轴线之间的距离。
},
axisLine: {
show: true, //不显示x轴
lineStyle: {
color: " #616566",
},
},
axisTick: {
show: false, //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.8,
lineStyle: {
type: "solid",
color: "#03202E",
},
},
}, ],
yAxis: [{
type: "value",
min: 0,
max: 400,
splitLine: {
show: false,
lineStyle: {
color: "#7C7F81",
type: "solid",
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: " #6d7475",
},
},
axisLabel: {
textStyle: {
color: "white",
},
},
}, ],
series: [{
//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [20, 12],
symbolOffset: [0, 3],
data: [275, 206, 168, 296, 150, 500],
z: 5,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#83D5D3",
fontSize: 12,
},
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#5BB7C5",
},
{
offset: 1,
color: "#5BB7C5",
},
]),
},
},
data: line,
},
//柱体
{
name: "",
type: "bar",
barWidth: 20,
barGap: "0%",
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [{
//第一节下面
offset: 0,
color: "#6DB0B6",
},
{
offset: 1,
color: "#6DB0B6",
},
],
},
},
},
data: line,
},
//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [20, 12],
symbolOffset: [0, -8],
z: 12,
symbolPosition: "end",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: "#5BB7C4",
},
{
offset: 1,
color: "#9BF9F9",
},
],
false
),
},
},
data: line,
},
],
};
//使用制定的配置项和数据显示图表
myChart.setOption(option);
以上就是今天要讲的内容,本文仅仅简单介绍了echarts遇到柱状图的使用,而官网提供了大量能使我们快速便捷地处理数据的函数和方法 没事的童鞋们可以去看看。