具体的上代码
var myChartzuoixia = echarts.init(document.querySelector(''));$("#tableEcharts").removeAttr("_echarts_instance_").empty();let option = {tooltip: {trigger: 'axis',axisPointer: {// type: 'cross',crossStyle: {color: '#999'}},textStyle: {fontSize: document.body.clientWidth > 2800 ? 23 : 14},formatter: function (params) {// return console.log(params);let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:15px;height:15px;left:5px;background-color:params[0].color"></span>`;// let data0 = `${circle}params[0].color"></span>`;let aa=params[0].color// return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}`;return `${params[0]. axisValueLabel}</br><span style="display:inline-block;margin-right:5px;margin-top:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${aa}"></span> ${nameshuichang} ：${params[0].value[1]}`}},textStyle: {color: 'rgb(250,253,255)'},legend: {// data: ['${nameshuichang}'],function(name) {return 'Legend ' + name;},textStyle: {//图例文字的样式color: '#fff',fontSize: document.body.clientWidth > 2800 ? 20 : 12},selectedMode: true,//取消图例上的点击事件},// color: ['#ff8734', '#00e6fb', '#3bff38', 'transparent', 'red', 'red'],grid: {left: '4%',right: '4%',bottom: '12%',top: '10%',containLabel: true},xAxis: [{type: 'time',axisPointer: {type: 'shadow'},axisLine: {//线show: false},axisTick: {//刻度show: false},splitLine: {show: false//去掉分割线},axisLabel: {show: true,color: '#fff',textStyle: {fontSize: document.body.clientWidth > 2800 ? 18 : 14//更改坐标轴文字大小}}}],yAxis: [{type: 'value',nameTextStyle: {fontSize: document.body.clientWidth > 2800 ? 20 : 14},axisLine: {//线show: false},axisTick: {//刻度show: false},splitLine: {show: false,//去掉分割线lineStyle: {color: 'rgb(80,80,80)'}},axisLabel: {show: true,color: '#fff',textStyle: {fontSize: document.body.clientWidth > 2800 ? 18 : 14//更改坐标轴文字大小}},}],dataZoom: [{type: 'slider',xAxisIndex: 0,filterMode: 'empty',backgroundColor: 'rgba(1,80,114,0.5)',fillerColor: 'rgba(35,159,253,.6)',filterMode: 'none',start: 0,end: 100,handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '80%',height: 13,handleSize: 20,borderColor: 'rgba(1,80,114,0.5)',handleStyle: {color: '#fff',shadowBlur: 3,shadowColor: 'rgba(0, 0, 0, 0.6)',shadowOffsetX: 2,shadowOffsetY: 2},textStyle: {color: '#fff'}},{type: 'slider',yAxisIndex: 0,filterMode: 'empty',left: '1%',backgroundColor: 'rgba(1,80,114,0.5)',fillerColor: 'rgba(35,159,253,.6)',filterMode: 'none',handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '80%',width: 13,handleSize: 20,borderColor: 'rgba(1,80,114,0.5)',handleStyle: {color: '#fff',shadowBlur: 3,shadowColor: 'rgba(0, 0, 0, 0.6)',shadowOffsetX: 2,shadowOffsetY: 2},textStyle: {color: '#fff'}},{type: 'inside',xAxisIndex: 0,filterMode: 'empty',backgroundColor: 'rgba(1,80,114,0.5)',fillerColor: 'rgba(35,159,253,.6)',filterMode: 'none',start: 0,end: 100,handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '80%',height: 13,handleSize: 20,borderColor: 'rgba(1,80,114,0.5)',handleStyle: {color: '#fff',shadowBlur: 3,shadowColor: 'rgba(0, 0, 0, 0.6)',shadowOffsetX: 2,shadowOffsetY: 2},textStyle: {color: '#fff'}},{type: 'slider',yAxisIndex: 1,filterMode: 'empty',backgroundColor: 'rgba(1,80,114,0.5)',fillerColor: 'rgba(35,159,253,.6)',filterMode: 'none',start: 0,end: 100,handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',handleSize: '80%',width: 13,handleSize: 20,borderColor: 'rgba(1,80,114,0.5)',handleStyle: {color: '#fff',shadowBlur: 3,shadowColor: 'rgba(0, 0, 0, 0.6)',shadowOffsetX: 2,shadowOffsetY: 2},textStyle: {color: '#fff'}},],series: [{name: nameshuichang,type: 'line',showSymbol: false,data: a,// itemStyle: {normal: {opacity: 0}},// lineStyle: {normal: {opacity: 0}}},]}myChartzuoixia.setOption(option)
具体修改的代码是
tooltip: {trigger: 'axis',axisPointer: {// type: 'cross',crossStyle: {color: '#999'}},textStyle: {fontSize: document.body.clientWidth > 2800 ? 23 : 14},// 这个是关键formatter: function (params) {// return console.log(params);let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:15px;height:15px;left:5px;background-color:params[0].color"></span>`;// let data0 = `${circle}params[0].color"></span>`;let aa=params[0].color// return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}`;return `${params[0]. axisValueLabel}</br><span style="display:inline-block;margin-right:5px;margin-top:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${aa}"></span> ${nameshuichang} ：${params[0].value[1]}`}},
默认高亮的效果
// 默认高亮 ，模拟鼠标划入效果使用let index = 0; // 高亮索引myChart.dispatchAction({type: "highlight",seriesIndex: index,dataIndex: index});myChart.on("mouseover", function(e) {if (e.dataIndex != index) {myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index});}});myChart.on("mouseout", function(e) {index = e.dataIndex;myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex});});window.addEventListener("resize", function () {myChart.resize()})
如果字体模糊了 请使用 svg下方是使用结果 另外是注释的是渐变色
let myChart = echarts.init(chartDom2, null, {renderer: 'svg'});
//贡献值的echartsContributionEcharts() {let that = thislet chartDom2 = document.getElementById('ContributionEchartsid');let myChart = echarts.init(chartDom2, null, {renderer: 'svg'});var salvProMax = [];//背景按最大值for (let i = 0; i < that.salvProValue.length; i++) {salvProMax.push(that.salvProValue[0])}let option = {// backgroundColor:"#003366",grid: {left: '2%',right: '2%',bottom: '-1%',top: '1%',containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'none'},formatter: function (params) {return params[0].name + ' : ' + params[0].value}},xAxis: {show: false,// type: 'value',splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},},yAxis: [{// scale : true,// max :9,// min :0,// splitNumber : 100,// boundaryGap : [ 0.4, 0.3 ],// show: true,type: 'category',inverse: true,axisLabel: {show: true,textStyle: {color: '#000000',fontSize: '16',//},},splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},data: that.salvProName}, {type: 'category',inverse: true,axisTick: 'none',axisLine: 'none',show: true,axisLabel: {margin: -20,textStyle: {color: '#000000',fontSize: '16',},},data: that.salvProValue}],series: [{name: '值',type: 'bar',zlevel: 1,itemStyle: {normal: {color: 'rgb( 89,190,255)',barBorderRadius: [0, 30, 30, 0],// borderRadius: //（顺时针左上，右上，右下，左下）// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{//offset: 0,//color: 'rgb( 89,190,255)'// }, {//offset: 1,//color: 'rgb( 89,190,255)'// }]),},},barWidth: 17,data: that.salvProValue},{name: '背景',type: 'bar',barWidth: 17,barGap: '-100%',data: salvProMax,itemStyle: {normal: {color: 'rgba( 176,230,255,0.3)',barBorderRadius: 30,}},},]};myChart.setOption(option)window.addEventListener("resize", function () {myChart.resize()})},
下方是数据
salvProName: ["王海波", "霍志鹏", "区敏豪", "张章军", "张献翔", "林 勇", "霍志鹏", "霍志鹏", "霍志鹏", "霍志鹏"],salvProValue: [239, 181, 154, 144, 135, 117, 74, 72, 67, 55],
传值高亮
myChart.dispatchAction({type: 'highlight',// 可选，系列名称，可以是一个数组指定多个系列// seriesName: items.name,// 可选，数据的 index// dataIndex: number,// // 可选，数据的 名称name: indexs})
