使用echarts做一个简单的柱状的案例[可以设置柱体的样式]

使用echarts做一个简单的柱状的案例[可以设置柱体的样式]

我这个是在vue项目中写echarts 所以我会提前用依赖下载echarts 然后import引入 进行使用

以上就是做出来的效果 具体怎么做呢？？？？

<div id="ruleengineright-one"></div>

css样式

#ruleengineright-one {width: 100%;height: 292px;border: 1px solid #ccc;border-radius: 8px;// background-color: yellow;box-shadow: 0 2px 3px -1px #ccc,//底部阴影2px 0 3px -1px #ccc; //右边阴影;}

methods中

bulidData(id) {this.chartsOne = echarts.init(document.getElementById(id));this.chartsOne.setOption({title: {text: "规则使用",left: "left",top: 8,textStyle: {color: "#607181",fontWeight: "bolder",fontFamily: "思源黑体",fontSize: 18,},},legend: {left: 32,right: 40,textStyle: {color: "#607181",fontSize: 14,},},grid: {top: "17%",left: "10%",right: "8%",bottom: "10%",},// 横坐标xAxis: {// 坐标轴axisLine: {show: false,},axisTick: {//x轴刻度线show: false,},axisLabel: {show: true,textStyle: {color: "#607181", //更改坐标轴文字颜色fontSize: 12, //更改坐标轴文字大小fontFamily: "思源黑体",},},type: "category",data: ["山西","天津","河北","陕西","湖北","西藏","河南","浙江",],},yAxis: {// 坐标轴axisLine: {show: false,},axisTick: {//y轴刻度线show: false,},axisLabel: {show: true,textStyle: {color: "#607181", //更改坐标轴文字颜色fontSize: 12, //更改坐标轴文字大小fontFamily: "思源黑体",},},type: "value",min: 0,max: 100,},series: [{itemStyle: {normal: {// 柱形图圆角，初始化效果barBorderRadius: [10, 10, 5, 5],color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{offset: 0,color: "#0167E8",},{offset: 1,color: "#13ACE8",},]),label: {// 柱形图顶端样式show: true, //开启显示position: "top", //在上方显示textStyle: {//数值样式color: "#607181",fontSize: 14,},},},},barWidth: "25%",data: [45, 15, 27, 80, 30, 80, 15, 30],type: "bar",},],});},

一定要在mouted中调用

 this.$nextTick(function () {this.bulidData("ruleengineright-one");});

*注意在data数据中写入chartsOne=" "
*
还可以按照自己的喜好调整哦！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！