Aide:ECharts

option = {

 grid: {
   left: '3%',
   right: '4%',
   bottom: '3%',
   containLabel: true
 },
 xAxis: [
   {
     type: 'category',
     data: ["Analyse économique"]
   }
 ],
 yAxis: [
   {
     type: 'value',
     axisLabel: {
        formatter: '{value} €'
     }
   }
 ],
 series: [
   { name: "Chiffre d'affaire", type: 'bar', barWidth: "30%", label: { show: true, position: 'inside', formatter: '{a}\n{c} €' }, stack: "Chiffre d'affaire", emphasis: { focus: 'series' }, data: [51000] },
   
   { name: 'Vente de produits végétaux', type: 'bar', barWidth: "10%", stack: "Détail chiffre d'affaire", emphasis: { focus: 'series', label: { show: true, position: 'right', formatter: '{a}\n{c} €' } }, data: [51000] },
   
   {
     name: 'Separator',
     type: 'bar',
     barWidth: "10%", 
     stack: 'Total',
     itemStyle: {
       borderColor: 'transparent',
       color: 'transparent'
     },
     data: [0]
   },
   
   { name: 'Charges opérationnelles', type: 'bar', barWidth: "30%", label: { show: true, position: 'inside', formatter: '{a}\n{c} €' }, stack: 'Charges', emphasis: { focus: 'series' }, data: [10200] },

{ name: 'Fournitures diverses', type: 'bar', barWidth: "10%", stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [5000] }, { name: 'Bâches et voiles', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [0] }, { name: 'Terreau', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [400] }, { name: 'Fertilisation', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [0] }, { name: 'Achat des légumes (revente)', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [2300] }, { name: 'Semences et plants', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [2500] },

   { name: 'Charges de structure', type: 'bar', label: { show: true, position: 'inside', formatter: '{a}\n{c} €' }, stack: 'Charges', emphasis: { focus: 'series' }, data: [9200] },

{ name: 'Assurances', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [1400] }, { name: 'Fermage', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [500] }, { name: 'Certification', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [500] }, { name: 'Eau, gaz, électricité', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [1000] }, { name: 'Entretien matériel', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [5000] }, { name: 'Carburant', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [800] },

   { name: 'Charges personnel', type: 'bar', label: { show: true, position: 'inside', formatter: '{a}\n{c} €' }, stack: 'Charges', emphasis: { focus: 'series' }, data: [14500] },

{ name: 'Cotisations exploitants', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [3500] }, { name: 'Cotisations salariés', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [3000] }, { name: 'Salariés', type: 'bar', stack: 'Détail des charges', emphasis: { focus: 'series', label: { show: true, position: 'left', formatter: '{a} {c} €' } }, data: [8000] },

   { name: 'EBE', type: 'bar', label: { show: true, position: 'inside', formatter: '{a}\n{c} €' }, stack: 'Charges', emphasis: { focus: 'series' },  data: [23000] },
 ]

};

option = {

 tooltip: {
   trigger: 'axis',
   axisPointer: {
     type: 'shadow'
   }
 },
 legend: {
   data: ['Forest', 'Steppe', 'Desert', 'Wetland']
 },
 toolbox: {
   show: true,
   orient: 'vertical',
   left: 'right',
   top: 'center',
   feature: {
     mark: { show: true },
     dataView: { show: true, readOnly: false },
     magicType: { show: true, type: ['line', 'bar', 'stack'] },
     restore: { show: true },
     saveAsImage: { show: true }
   }
 },
 xAxis: [
   {
     type: 'category',
     axisTick: { show: false },
     data: ['2012', '2013', '2014', '2015', '2016']
   }
 ],
 yAxis: [
   {
     type: 'value'
   }
 ],
 series: [
   {
     name: 'Forest',
     type: 'bar',
     barGap: 0,
     label: {
 show: true,
 position: 'insideBottom',
 distance: 15,
 align: 'left',
 verticalAlign: 'middle',
 rotate: 90,
 formatter: '{c}  {name|{a} }',
 fontSize: 16,
 rich: {
   name: {}
 }

},

     emphasis: {
       focus: 'series'
     },
     data: [320, 332, 301, 334, 390]
   },
   {
     name: 'Steppe',
     type: 'bar',
     label: {
 show: true,
 position: 'insideBottom',
 distance: 15,
 align: 'left',
 verticalAlign: 'middle',
 rotate: 90,
 formatter: '{c}  {name|{a} }',
 fontSize: 16,
 rich: {
   name: {}
 }

},

     emphasis: {
       focus: 'series'
     },
     data: [220, 182, 191, 234, 290]
   },
   {
     name: 'Desert',
     type: 'bar',
     label: {
 show: true,
 position: 'insideBottom',
 distance: 15,
 align: 'left',
 verticalAlign: 'middle',
 rotate: 90,
 formatter: '{c}  {name|{a} }',
 fontSize: 16,
 rich: {
   name: {}
 }

},

     emphasis: {
       focus: 'series'
     },
     data: [150, 232, 201, 154, 190]
   },
   {
     name: 'Wetland',
     type: 'bar',
     label: {
 show: true,
 position: 'insideBottom',
 distance: 15,
 align: 'left',
 verticalAlign: 'middle',
 rotate: 90,
 formatter: '{c}  {name|{a} }',
 fontSize: 16,
 rich: {
   name: {}
 }

},

     emphasis: {
       focus: 'series'
     },
     data: [98, 77, 101, 99, 40]
   }
 ]

};

option = {

 tooltip: {
   trigger: 'item'
 },
 legend: {
   top: '5%',
   left: 'center'
 },
 series: [
   {
     name: 'Access From',
     type: 'pie',
     radius: ['40%', '70%'],
     avoidLabelOverlap: false,
     label: {
       show: false,
       position: 'center'
     },
     emphasis: {
       label: {
         show: true,
         fontSize: 40,
         fontWeight: 'bold'
       }
     },
     labelLine: {
       show: false
     },
     data: [
       { value: 80, name: 'Un truc à mettre' },
       { value: 20, name: 'Légende à compléter' }
     ]
   }
 ]

};

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique pulvinar libero, ac posuere nibh. Mauris imperdiet accumsan luctus. Maecenas vitae ultrices nulla. Vestibulum imperdiet, magna vitae porttitor iaculis, justo sem rhoncus urna, id accumsan nisi orci at felis. Nunc tristique consectetur augue, quis aliquet orci. Vivamus blandit, nisi eu lacinia elementum, sapien velit rhoncus libero, non luctus purus leo eu ipsum. Nulla dapibus ultricies dui non dignissim. Maecenas scelerisque est quis ex eleifend pulvinar. Fusce placerat placerat magna efficitur aliquet. Pellentesque quis augue vel velit rutrum vestibulum vel sed nulla. Nunc suscipit risus eu lacinia pharetra. Phasellus faucibus nec eros non molestie. Donec accumsan, ipsum et pellentesque tempus, arcu ligula fermentum nisl, egestas volutpat ligula massa at leo. Etiam at consequat nibh, id tincidunt enim. Maecenas sit amet pretium tellus. Vestibulum et gravida purus, bibendum feugiat arcu. Cras quis commodo urna, in scelerisque nisi. Pellentesque eget nisl tincidunt, vulputate dui egestas, facilisis erat.

Duis sed tempor nulla. Ut sit amet lacus efficitur, bibendum velit sit amet, vestibulum mauris. Quisque rutrum bibendum nisl, a ultrices sapien ullamcorper et. Aenean aliquet neque ut felis molestie porta. Maecenas vitae purus euismod, convallis enim vel, ultricies tortor. Vestibulum lacinia sem lectus, tristique molestie sapien vehicula a. Praesent laoreet, sapien non tempor laoreet, elit ligula pretium orci, eget feugiat ex dolor eget sem. Maecenas at leo et sapien gravida ornare non id leo. Phasellus gravida arcu ullamcorper erat luctus, nec placerat orci interdum. In condimentum justo id mauris ornare, id finibus dui venenatis. In ac tortor aliquam, ultricies lectus eget, placerat nibh. Integer sit amet aliquet dui. Maecenas ullamcorper blandit ornare. Sed at ipsum eget eros laoreet egestas. Nullam ultricies leo ac laoreet venenatis. Pellentesque pulvinar facilisis eros, vitae lobortis tortor lacinia quis. Nullam nunc quam, iaculis quis lacinia eu, convallis id velit. Donec efficitur elementum magna ac lobortis. Vestibulum sed eleifend lorem, eu convallis ante. Nunc sit amet tincidunt sem. Nulla porttitor suscipit est, ut pretium lacus commodo at. Suspendisse ac velit sed risus molestie pretium at et nisi. Maecenas non sapien rutrum, malesuada neque ut, finibus odio. Nam in accumsan diam.

option = {

 legend: {
 },
 radar: {
   indicator: [
     { name: 'Satisfaction économique', max: 100 },
     { name: 'Satisfaction sociale', max: 100 },
     { name: 'Cadre de vie', max: 100 },
     { name: 'Coopération', max: 100 },
     { name: 'Efficacité temps de travail', max: 100 },
     { name: 'EBE/UTH', max: 100 },
     { name: 'Confort au travail', max: 100 }
   ]
 },
 series: [
   {
     type: 'radar',
     data: [
       {
         value: [100, 20, 70, 60, 20, 90, 80],
         name: 'Moyenne',
         emphasis: { title: { show: true },  label: { show: true, formatter: '{c}%' } }, 
         lineStyle: {width : 3}
       },
       {
         value: [70, 20, 40, 60, 70, 70, 70],
         name: 'Ferme de la brouette bleue',
         emphasis: { label: { show: true, formatter: '{c}%' } }, 
         itemStyle: {width : 3, color: "#f1894c" },
         lineStyle: {width : 3, color: "#f1894c" },
         areaStyle: {color: "#f1894c" }
       }
     ]
   }
 ]

};

Aenean nec congue metus. Praesent enim libero, rutrum ut nisl ac, convallis tempus orci. Aliquam ultrices, justo tristique malesuada rutrum, urna dolor blandit quam, id consequat sapien arcu vitae magna. Nullam in ex ornare, sagittis lectus ac, scelerisque massa. Maecenas gravida elit id elit semper, ac feugiat dolor varius. Sed a dui eu ipsum iaculis rutrum. Suspendisse imperdiet posuere erat, quis hendrerit quam malesuada mollis. Donec pharetra sollicitudin magna convallis lacinia. In hac habitasse platea dictumst.