// 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("mainT")); let option = { //画布背景色设置 backgroundColor: "#f1f1f1", title: { text: "这个是主标题", textStyle: { //设置主标题字体颜色 color: "#90E5E7" }, subtext: "这个是副标题" }, tooltip: { trigger: "axis" }, legend: { data: ["分类一", "分类二"] }, toolbox: { show: true, feature: { dataView: { show: true, readOnly: false }, magicType: { show: true, type: ["line", "bar"] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, xAxis: [ { type: "category", data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ] } ], yAxis: [ { type: "value", axisLine: { //y轴 show: false }, axisTick: { //刻度线 show: false }, splitLine: { //网格线 show: true } } ], series: [ { name: "蒸发量", type: "bar", //设置柱状图宽度 barWidth: "13", data: [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 ], itemStyle: { normal: { //柱形图圆角,顺时针左上,右上,右下,左下) barBorderRadius: [12, 12, 12, 12], //设置柱状图颜色渐变 color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "#f75d5d" }, { offset: 1, color: "#f0caca" } ] ) } } }, { name: "降水量", type: "bar", //设置柱状图宽度 barWidth: "13", //柱状图间距 barGap:"200%", data: [ 26.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 26.3 ], itemStyle: { normal: { // 统一设置四个角的圆角大小 barBorderRadius: 12, //设置柱状图颜色渐变 color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "#5ad9e8" }, { offset: 1, color: "#caecf0" } ] ) } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
dashboard效果
series: [ { data: [3480, 340, 171, 3897, 1234], type: 'bar', itemStyle: { normal: { barBorderRadius: [8, 8, 0, 0], color: function(params) { var colorList = [ '#DC69AA', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80', '#8D98B3', '#E5CF0D', '#97B552', '#2EC7C9' ] return new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#5AB1EF' }, { offset: 1, color: '#C0DCF9' } ] ) }, label: { show: true, position: 'top', formatter: '{b}\n{c}' } } } } ]