echarts常见图形-不同种类不同颜色柱状图(二)

颜色分类柱状图

1.最终效果图
2.echarts文件(ncplxfx.js)
3.vue文件中
- 3.1 html
- 3.2 js逻辑处理(引入ncplxfx.js)

1.最终效果图

2.echarts文件(ncplxfx.js)

import echarts from "echarts";export const ncplxfxOption = (xData, sData) => {let colorArr = [{top: "#097693",bottom: "#0a3753",end: "#00d8fa"},{top: "#0f3985",bottom: "#07254b",end: "#2970ff"},{top: "#566370",bottom: "#1d3046",end: "#a7a7a7"},{top: "#666423",bottom: "#213030",end: "#f8b618"},{top: "#68412b",bottom: "#232530",end: "#ff8635"},{top: "#691e2b",bottom: "#201c35",end: "#ff3333"},{top: "#48419a",bottom: "#17254f",end: "#9473ff"},{top: "#3c8a43",bottom: "#133e3d",end: "#71f974"}];//   let xData = ["蔬菜类", "畜禽类", "水产类", "粮油类", "茶叶类", "果品类", "花卉类", "其他类"];//   let sData = [172, 850, 633, 833, 542, 318, 625, 731];let option = {textStyle: {fontFamily: "BebasNeue"},tooltip: {axisPointer: {type: "shadow",textStyle: {color: "#fff"}}},grid: {borderWidth: 0,top: "10%",left: "10%",right: "2%",bottom: "20%",textStyle: {color: "#fff"}},legend: {show: false,orient: "vertical", //horizontal  verticalicon: "roundRect",right: "4%",top: "6%",textStyle: {color: "red"},data: ["蔬菜类", "畜禽类", "水产类", "粮油类", "茶叶类", "果品类", "花卉类", "其他类"]},yAxis: [{type: "value",//   trigger: "axis",splitNumber: 4,axisLine: {show: true,lineStyle: {color: "#115080"}},splitLine: {show: true,lineStyle: {color: "#115080",width: "0.5",type: "dashed",opacity: "0.5"}},axisTick: {show: false},splitArea: {show: false},axisLabel: {interval: 0,textStyle: {color: "#59c9f9",fontSize: 12}}// "data": [],}],xAxis: [{type: "category",splitLine: {show: false},splitNumber: 4,axisLine: {lineStyle: {color: "#115080",type: "solid"}},axisTick: {show: false},axisLabel: {interval: 0,show: true,margin: 5,// rotate: 45,textStyle: {color: "#59c9f9",fontSize: 12}},splitArea: {show: false},data: xData}],series: [{name: "蔬菜类",type: "bar",// stack: "A",barWidth: 8,// barGap: "10%",itemStyle: {normal: {color: function(params) {let num = colorArr.length;return new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: colorArr[params.dataIndex % num].top // 0% 处的颜色},{//可根据具体情况决定哪根柱子显示哪种颜色offset: 1,color: colorArr[params.dataIndex % num].bottom // 100% 处的颜色}],false);}}// opacity: 0.5},data: sData},{// name: "农产品交易类型分析",type: "pictorialBar",barGap: "-100%",symbol: "rect",symbolPosition: "end",symbolSize: [8, 2],symbolOffset: [0, -4],data: sData.map((x, index) => {return {value: x,itemStyle: {color: colorArr[index].end}};})}]};return option;
};

3.vue文件中

3.1 html

<div style="width:30vh;height:30vh" ref="ncplxfxChart"></div>

3.2 js逻辑处理(引入ncplxfx.js)

<script>import { ncplxfxOption } from "@/assets/js/xxjyzt/ncplxfx"; //农产品类型分析export default {data(){},methods: {// 农产品类型分析ncplxfx() {let xData = ["蔬菜类", "畜禽类", "水产类", "粮油类", "茶叶类", "果品类", "花卉类", "其他类"];let sData = [172, 850, 633, 833, 542, 318, 625, 731];let ncplxfxChartEle = this.$echarts.init(this.$refs.ncplxfxChart);ncplxfxChartEle.setOption(ncplxfxOption(xData, sData));},// 初始化图形initEcharts() {let ncplxfxChartEle = this.$echarts.init(this.$refs.ncplxfxChart); //农产品类型分析window.addEventListener("resize", function() {ncplxfxChartEle.resize(); //农产品类型分析});}},mounted() {this.ncplxfx(); // 农产品类型分析this.initEcharts();}}
</script>

echarts常见图形-不同种类不同颜色柱状图(二)相关推荐

echarts常见图形-折线图(三)
折线图 1.最终效果图 2.echarts文件(ndfx.js) 3.vue文件中 3.1 html 3.2 js逻辑处理(引入ncplxfx.js) 1.最终效果图 2.echarts文件(ndfx ...
Matplotlib常见图形绘制（折线图、散点图、柱状图、直方图、饼图）
Matplotlib能够绘制折线图.散点图.柱状图.直方图.饼图. 我们需要知道不同的统计图的意义,以此来决定选择哪种统计图来呈现我们的数据. 1 常见图形种类及意义折线图:以折线的上升或下降来表示 ...
数据分析基础学习_Matplotlib_常见图形及绘制（折线图/散点图/柱状图/直方图/饼图）
1.3 常见图形及绘制 matplotlib可以绘制折线图.散点图.柱状图.直方图.饼图 1.3.1 常见图形种类及意义折线图:以折线的上升或下降来表示统计量的增减变化的统计图特点:可以显示数据的 ...
干货分享 | 代谢组学数据分析，常见图形制作分享-百趣生物
前两期<代谢组学两种常见图形制作分享>.<代谢组学常见图形制作分享(二)>给大家详细介绍了韦恩图.箱线图和ROC曲线的绘制,不知各位趣粉学得如何啦?今天BIOTREE生信分析的 ...
Origin: 常见图形参数设置（汇总篇）
Origin: 常见图形参数设置(汇总篇) (一)坐标轴的设置 1. 坐标轴刻度的调整 2. 坐标轴网格线的设置 3. 坐标轴重叠及特殊刻度线设置 (二)图例的设置 1. 图例的调整 2. 图例横向展 ...
计算机类和鼠标类是什么关系,常见鼠标的种类
常见鼠标的种类常见鼠标的种类有哪些?鼠标的种类有很多,就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网! 目前常用的鼠标按照定位原理分为;普通光电鼠标;定位原理:红光 ...
5种常见的服务器种类是哪些
5种常见的服务器种类是:1.文件服务器,以文件数据的存储与共享为主要功能的服务器:2.数据库服务器,主要作用是为应用程序提供数据服务:3.邮件服务器,:4.网页服务器,指在互联网中存放各种网站的服务器 ...
实验室装水的容器叫什么_实验室常见水的种类_生命之源水
实验室常见水的种类_生命之源水 2.实验室常见水的种类升腾后的凝结--蒸馏水蒸馏水是指经过蒸馏处理后的水.这种水常用于试验,人们一般都认为蒸馏水是纯净物. 蒸馏水有它独特的功能,它能去除自来水内大 ...
计算机的图形图像文件格式,常见图形图像文件格式.ppt
常见图形图像文件格式课程简介 1．多媒体技术的基本概念 2．多媒体特征与关键技术 3．多媒体计算机系统(软件和硬件) 4．常见多媒体文件格式 5．多媒体技术的发展与应用 6．多媒体作品设计的一般流程 ...
vue3中，echarts使用（四）02——柱状图之堆叠条形图-定制化封装切换tag标签组件封装title组件
vue3中,echarts使用(四)02--柱状图之堆叠条形图-定制化 & 封装切换tag标签组件 & 封装title组件效果代码 1.主页面 index.vue <temp ...

echarts常见图形-不同种类不同颜色柱状图(二)

颜色分类柱状图

1.最终效果图

2.echarts文件(ncplxfx.js)

3.vue文件中

3.1 html

3.2 js逻辑处理(引入ncplxfx.js)

echarts常见图形-不同种类不同颜色柱状图(二)相关推荐

最新文章

热门文章