Echarts 图表插件学习(3)-- 给柱形图的每个柱子设置不同颜色

1.实现的效果

2.引用Echarts

本地:<script src="../lib-v3/echarts/echarts.min.js"></script>

在线:<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

3.Html页面

 <div class="chart-1"  id="test"  style="width:800px;height:400px;"> </div>

4.封装插件

 .factory('chartFactory', function () {
            var service = {
                xjData:xjData
            };

            return service;

          
            /**
             *echart图表封装函数,矩形图,支持最大支持一组12个矩形不同颜色
             * @ labelData, 实例ID数组
             * @ XArr, X轴数据
             *@ YArr, Y轴数据
             *@ divId,图表所在DIV的ID
             *@ titleText ,Y轴标题
             *@ ubtext ,Y轴标题
             *@ unit ,Y轴单位刻度
             */
            function xjData(labelData, XArr, YArr, divId, titleText, subtext,unit) {
                var lineColor = ['#3C72C4', '#DD2292', '#F79709', '#2BD56F', '#666699',];
                var seriesDataArr = [];
                var countFor = 0;
                for (var i = 0; i < labelData.length; i++) {
                    var seriesObj = {
                        name:labelData[i],//y轴上的鼠标事件显示
                        type: 'bar',
                        data: YArr[i],//y轴数据
                        itemStyle: {
                            normal:{
                                color: function (params){
                                    var colorList = ['#3C72C4','#DD2292','#F79709','#ffc032','#2BD56F','#f47e39','#4D2292','#879709','#f0c032','#9BD56F','#147e39','#947e39'];
                                    return colorList[params.dataIndex];
                                }
                            },
                        },
                    };
                    seriesDataArr.push(seriesObj);
                    countFor++;
                    if (countFor == labelData.length) {
                        XJRequire(labelData, XArr, seriesDataArr, divId, titleText, subtext ,unit)
                    }
                }
            };

            /**
             *echart加载模块函数
             * @ labelData, 实例ID数组
             * @ XArr, X轴数据
             *@ YArr, Y轴数据
             *@ divId,图表所在DIV的ID
             *@ titleText ,Y轴标题
             *@ subtext ,Y轴标题
             *@ unit ,Y轴单位刻度
             */
            function XJRequire(labelData, XArr, seriesDataArr, divId, titleText, subtext,unit ) {

                var option2 = {
                    title: {
                        text: titleText,//y轴大标题
                        subtext: subtext//y轴小标题
                    },
                    tooltip: {
                        show: true
                    },
                  /*  legend: {
                        data: labelData//可以选择是否显示
                    },*/
                    grid: {
                        containLabel: true
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: XArr  //x轴坐标值
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel : {
                                formatter: '{value}'+ unit//y轴单位刻度
                            }
                        }
                    ],
                    series: seriesDataArr,
                };
                echarts.init(document.getElementById(divId)).setOption(option2, true);
            }
           

        })

5.调用Echarts

                vm.Id = [];
                vm.Id[0] = "深圳";
                vm.x = [];
                vm.x = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
                vm.y = [];
                vm.y[0] = [];vm.y[0] = [5, 8, 12, 10, 10, 35, 20, 40, 10, 10, 2,10];
                chartFactory.xjData(vm.Id, vm.x, vm.y, 'test', "平均温度", '', '℃');

6.Echarts 插件下载,适用于本地加载Echarts图表插件

链接: https://pan.baidu.com/s/1GCM4H4E5F0L-ni4R5boIvQ 密码: w7pw

 

### 回答1: 在Vue中使用echarts柱形图预警变色,可以通过以下步骤实现: 1. 安装echarts ``` npm install echarts --save ``` 2. 在Vue组件中引入echarts ``` import echarts from &#39;echarts&#39; ``` 3. 在Vue组件中定义echarts图表的配置项和数据 ``` data() { return { chartData: { xAxis: { type: &#39;category&#39;, data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;] }, yAxis: { type: &#39;value&#39; }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: &#39;bar&#39; }] } } } ``` 4. 在Vue组件的mounted钩子函数中初始化echarts图表,并设置预警变色 ``` mounted() { const chart = echarts.init(this.$refs.chart) chart.setOption(this.chartData) chart.setOption({ series: [{ itemStyle: { normal: { color: function(params) { if (params.data >= 150) { return &#39;#FF5722&#39; } else { return &#39;#2196F3&#39; } } } } }] }) } ``` 以上代码中,我们通过设置itemStyle.normal.color属性来设置每个数据项的颜色。在这里,我们设置当数据项的值大于等于150时,颜色为橙色;否则,为蓝色。 5. 在Vue组件的template中添加echarts图表 ``` <template> <div ref="chart" style="height: 400px;"></div> </template> ``` 通过以上步骤,我们就可以在Vue中使用echarts柱形图预警变色了。 ### 回答2: 在Vue中使用Echarts柱形图预警变色的方法如下: 1. 首先,在Vue项目中安装echarts插件。可以使用npm或者yarn命令安装,例如:npm install echarts --save 2. 在Vue组件中导入echarts并创建一个echarts实例。 3. 在data中定义柱形图的数据和预警的阈值。 4. 在mounted或者created生命周期钩子函数中,使用echarts的setOption方法设置柱形图的配置。 5. 在柱形图的配置中,设置柱子颜色。 6. 在柱形图的配置中,根据预警标准,判断柱子是否需要变色,并设置相应的颜色。 下面是一个简单的示例代码,在Vue组件中实现柱形图的预警变色: <template> <div id="chart"></div> </template> <script> import echarts from &#39;echarts&#39; export default { data() { return { chartData: [120, 200, 150, 80, 70, 110, 130], // 柱形图的数据 warningThreshold: 100 // 预警阈值 } }, mounted() { this.renderChart() }, methods: { renderChart() { let chart = echarts.init(document.getElementById(&#39;chart&#39;)) chart.setOption({ xAxis: { type: &#39;category&#39;, data: [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;] }, yAxis: { type: &#39;value&#39; }, series: [ { type: &#39;bar&#39;, data: this.chartData, itemStyle: { normal: { color: function(params) { // 根据预警阈值判断柱子是否需要变色 if (params.value >= this.warningThreshold) { return &#39;red&#39; } else { return &#39;blue&#39; } }.bind(this) } } } ] }) } } } </script> 以上代码中,使用echarts.init方法创建了一个echarts实例,并将其渲染到指定的DOM元素中。在配置项的series属性中,定义了一系列柱形图的配置,其中的itemStyle属性用于设置柱子颜色。通过判断柱子的值是否大于等于预警阈值,并返回相应的颜色来实现预警变色的效果。需要注意的是,在itemStyle中的color配置项中,使用了bind方法绑定了this指向,以便在其中访问this.warningThreshold。 通过上述步骤,就可以在Vue中实现echarts柱形图的预警变色功能。 ### 回答3: 在Vue中使用echarts柱形图预警变色可以通过以下步骤实现: 1. 首先,引入echarts并在Vue组件中进行相关配置。可以使用npm安装echarts,并在Vue组件中引入echarts: ``` import echarts from &#39;echarts&#39; ``` 2. 在Vue组件中,创建一个DOM元素作为echarts图表的容器。可以使用Vue的ref属性来获取该元素的引用,并定义一个变量来保存echarts实例: ``` <template> <div ref="chartContainer"></div> </template> <script> export default { data() { return { chart: null } }, mounted() { this.initChart() }, methods: { initChart() { this.chart = echarts.init(this.$refs.chartContainer) // 省略其他配置 } } } </script> ``` 3. 在echarts的配置选项中,通过设置itemStyle来实现预警形的颜色变化。可以根据需求设置不同的阈值和预警颜色: ``` initChart() { this.chart = echarts.init(this.$refs.chartContainer) const option = { // 省略其他配置 series: [{ type: &#39;bar&#39;, data: [10, 20, 30, 40, 50], itemStyle: { normal: { color: function(params) { // 根据条件判断是否触发预警变色 if (params.value > 30) { return &#39;red&#39;; // 设置预警颜色为红色 } else { return &#39;blue&#39;; // 设置其他形的颜色 } } } } }] } this.chart.setOption(option) } ``` 以上就是在Vue中使用echarts柱形图预警变色的简单实现方式。根据具体需求,可以根据实际情况调整代码和配置,实现更灵活的柱形图预警变色效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值