首页 > 其他分享 >Echarts 多图表共用legend

Echarts 多图表共用legend

时间:2022-09-02 02:00:41浏览次数:66  
标签:function color true legend 图表 type var data Echarts

// 参考地址:https://www.isqqw.com/echartsdetail?id=31404
//加载数据 function LoadDataX() { GetApiDataSync2("url" , 'POST' , { annual: 2022 } , function (result) { if (result.Success) { setMap(result.data, "map1","line");//使用折线 } }, true ); } function LoadData() { GetApiDataSync2("url" , 'POST' , { annual:2022 } , function (result) { if (result.Success) { setMap(result.data, "map2","bar");//柱状图 } }, true ); } function setMap(data,chartid,type) { var x_data = []; var legendData = []; var selected = {}; var seriesData = []; avalon.each(data, function (index, el) { legendData.push(el.name); selected[el.name] = index < 2; var leftdata = [], rightdata = []; avalon.each(el.children, function (idx, item) { if (index === 0) { x_data.push(item.name); } leftdata.push(item.dfje); rightdata.push(item.corpnum); }); seriesData.push({ name: el.name, type: type, xAxisIndex: 0, yAxisIndex: 0, data: leftdata }); seriesData.push({ name: el.name, type: type, xAxisIndex: 1, yAxisIndex: 1, data: rightdata }); }); /* var dataAll = { "leftdata": { //leftdata "y_data": leftdata, "total": 8000 }, "rightdata": { //rightdata "y_data": rightdata, "total": 8000 }, "x_data": x_data }; */ var markLineOpt = { animation: false, label: { normal: { //formatter: 'y = 0.5 * x + 3', textStyle: { align: 'right' } } }, lineStyle: { normal: { type: 'solid' } }, tooltip: { //formatter: 'y = 0.5 * x + 3' }, data: [ [{ coord: [0, 3], symbol: 'none' }, { coord: [20, 13], symbol: 'none' }] ] }; var markxAxis = function (len) { var Axis = []; for (var i = 0; i < len; i++) { Axis.push(createxAxis(x_data,i)); } return Axis; }; var markyAxis = function (len) { var Axis = []; for (var i = 0; i < len; i++) { Axis.push(createyAxis(i)); } return Axis; }; option = { title: [{ top: '0%', x: '25%', textStyle: { fontSize: 14, color:"#fff" }, textAlign: 'center', text: '投入金额' }, { x: '75%', textStyle: { fontSize: 14, color: "#fff" }, textAlign: 'center', top: '0%', text: '覆盖企业' }], grid: [{ left: '3%', top: '20%', width: '45%', //height: '20%' }, { left: '53%', top: '20%', width: '45%', //height: '20%' } ], legend: { data: legendData, selected: selected, top: '', left: 'center', textStyle: { color: '#fff', fontSize: 12, }, }, tooltip: { show: 'true', trigger: "axis", axisPointer: { type: "cross" }, }, xAxis: markxAxis(2), yAxis: markyAxis(2), series: seriesData }; var chartDom = document.getElementById(chartid); if (chartDom) { var myChart = echarts.init(chartDom); option && myChart.setOption(option,true); } } function createxAxis(data, gridIndex) { return { data: data, gridIndex: gridIndex , axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: "#7B7F9C", // width: 1, //type: 'dashed', }, }, splitLine: { show: false, interval: 'auto', lineStyle: { color: ['#502297'], //type: 'dashed', }, }, axisTick: { show: false, //隐藏X轴刻度 alignWithLabel: true, }, axisLabel: { show: true, textStyle: { color: '#FFFFFF', //X轴文字颜色 fontSize: 12, }, margin: 12, interval: 0, rotate: 30, /* formatter: function (value) { if (value.length > 3) { return value.substring(0, 3); } return value; }, */ }, } } function createyAxis(gridIndex) { return { type: 'value', gridIndex: gridIndex, name: '单位:万元', nameTextStyle: { color: "#00b09b", fontSize: 12, }, splitLine: { show: true, interval: 'auto', lineStyle: { color: '#2D3A52' }, }, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: '#7b7f9c', }, }, axisLabel: { show: true, textStyle: { color: '#FFFFFF', fontSize: 12, }, }, } }

 

 

标签:function,color,true,legend,图表,type,var,data,Echarts
From: https://www.cnblogs.com/gxivwshjj/p/16648404.html

相关文章

  • 图表即代码
    图表即代码如何使用python构建基础架构图通常,结束任何项目的最后阶段是文档。这是任何项目中最不浮华且通常最令人厌烦的部分。您终于完成了架构,并准备好继续下一个令......
  • vue3 - 封装图表组件
      把相同或者类似的图表进行封装父组件使用:<Report:info="main4":xdata="RXData4":sdata="RSData4":title="title4"......
  • Echarts柱状图渲染进度条效果
    柱状图渲染进度条效果option={yAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],axisTick:{show:fals......
  • echarts-dataset数据源配置项
     如下效果图:   代码入下:letbox4=document.querySelector('.box4')letmyCharts3=echarts.init(box4)myCharts3.setOption({......
  • echarts-散点图-vue3-内阴影
      以上为效果图但是有一个问题是,一开始需要定义位置和颜色数组,当数据量过多的时候会重叠而且要提前声明很多数据后面我决定用关系图来做了,先放上散点图代码供参考f......
  • Echarts与ajax数据的动态交互
    初学Echarts,Echarts的官网示例中配置项的数据需要用到js数组来传递数据,所以当我们从后端查询到数据后,往往需要通过ajax来进行数据交互。这是官方示例的配置项。<script......
  • markdown图表语法Mermaid介绍
    Markdown是一种轻量级标记语言,除了编辑文字外,还支持插入图片、表格、公式,它是很流行的一种文档编辑语言,很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用......
  • 关于AnimInstance中动画图表内判断不写条件不报错问题
     实际上是,在外面过渡中勾选了(基于状态中序列播放器的自动规则) ......
  • echarts异形图柱状图,电量象形,base64
    varbgImg='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAF+CAYAAADNzDlVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAilJREFUeNrs1rENwjAURdEfC0p......
  • echarts环形饼图,百分比,圆角比例
    option={title:{text:'75',textStyle:{color:'#01c4a3',fontSize:60},subtext:'总分:100分',subtextStyle:{......