Component({ data: { showChart: true, brandOption: { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, confine: true }, legend: { icon: 'rectangle',//data图标样式 itemWidth: 10,//data图标大小 itemHeight: 10, textStyle: { fontSize: 9 }, data: ['微博', '其他','短视频', '微信','APP', '论坛', '新闻'], }, //图表位置 grid: { left: 20, right: 20, bottom: 15, top: 40, containLabel: true }, yAxis: [ { type: 'value', axisTick:{ show:false //去除刻度线 }, axisLine:{ show:false //去除轴线 }, axisLabel: { color: '#999999',//y轴文本颜色 textStyle: { fontSize : 9 } }, splitLine: { //分割线 // lineStyle:{ // // color:"#2d3436" // } show: true, lineStyle: { type: 'dashed', color: '#E8E8E8', } } } ], xAxis: [ { type: 'category', data: ['长安', '大众', '丰田', '吉利', '哈佛'], axisTick:{ show:false //去除刻度线 }, axisLine:{ show:false, //去除轴线 }, axisLabel: { color: '#999999',//x轴文本颜色 textStyle: { fontSize : 9 } } } ], series: [ { name: '微博', type: 'bar', data: [1400, 2000, 1500, 1800, 1490, 900, 310], stack:"Search Engine", emphasis: {//折线图的高亮状态。 focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 }, itemStyle: { normal:{ color: '#FF4852', lineStyle: { color: '#FF4852' } } } }, { name: '其他', type: 'bar', stack:"Search Engine", emphasis: {//折线图的高亮状态。 focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 }, data: [1520, 1052, 141, 174, 1690, 250, 220], itemStyle: { normal:{ color: '#FF6E25', lineStyle: { color: '#FF6E25' } } } }, { name: '短视频', type: 'bar', stack:"Search Engine", emphasis: {//折线图的高亮状态。 focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 }, data: [210, 322, 551, 364, 960, 1307, 10], itemStyle: { normal:{ color: '#FFBF00', lineStyle: { color: '#FFBF00' } } } }, { name: '微信', type: 'bar', stack:"Search Engine", emphasis: {//折线图的高亮状态。 focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 }, data: [250, 362, 71, 374, 970, 130, 170], itemStyle: { normal:{ color: '#20CC62', lineStyle: { color: '#20CC62' } } } }, { name: 'APP', type: 'bar', stack:"Search Engine", emphasis: {//折线图的高亮状态。 focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 }, data: [20, 32, 41, 354, 90, 130, 10], itemStyle: { normal:{ color: '#00D6D6', lineStyle: { color: '#00D6D6' } } } }, { name: '论坛', type: 'bar', stack:"Search Engine", emphasis: {//折线图的高亮状态。 focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 }, data: [200, 382, 661, 34, 909, 1308, 150], itemStyle: { normal:{ color: '#00AAFF', lineStyle: { color: '#00AAFF' } } } }, { name: '新闻', type: 'bar', stack:"Search Engine", emphasis: {//折线图的高亮状态。 focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 }, data: [250, 326, 178, 349, 900, 1300, 140], itemStyle: { normal:{ color: '#7257FF', lineStyle: { color: '#7257FF' } } } } ] }, }, onShow() { this.getTabBar().init(); }, methods: { priceSel(e){ this.setData({ intervalSel: e.currentTarget.dataset.index }) } } })