123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- @using WeApp.Helpers
- <div class="area" id="chart-cmd"></div>
- @using (Html.BeginScripts())
- {
- <script>
- //指令
- var cmdChart = echarts.init(document.getElementById('chart-cmd'));
- function CmdChart(data, category) {
- if (data && data.length > 0) {
- //console.log("=====>CMD", data);
- } else {
- console.log("CMD-Null");
- return;
- }
- window.titleOpt.text = "处置指令统计示意图";
- var series = [], nData = [], titleOpts = [window.titleOpt];
- for (var i = 0; i < data.length; i++) {
- var item = data[i];
- for (var ii = 0; ii < item.data.length; ii++) {
- if (i == 0) {
- nData.push([]);
- }
- nData[ii].push({
- name: item.name,
- value: item.data[ii],
- itemStyle:{
- color: roundColor[i % 3],
- }
- })
- }
-
- }
-
- for (var i = 0; i < 3; i++) {
- var item = nData[i];
- titleOpts.push({
- subtext: "第" + (i + 1) + "组",
- left: i == 0 ? '16.66%' : i == 1 ? "50%" : i == 2 ? "83.33%" : "",
- top: '75%',
- subtextStyle: {
- color: textColor[1],
- },
- textAlign: 'center'
- });
- series.push({
- //name: "第"+i+"组",
- type: "pie",
- radius: '80%',
- center: ['50%', '50%'],
- data: item,
- left: i * 33.3333 + '%',
- right: (2 - i) * 33.3333 + '%',
- top: 0,
- bottom: 0,
- label: {
- position: 'inside',
- formatter: ' {c} 条'
- },
-
- });
- }
- //series.push({
- // name: item.name,
- // type: "pie",
- // data: item.data,
- // stack: "cmd",
- // label: {
- // normal: {
- // show: true,
- // //formatter: '{a} : {c} 条',
- // formatter: ' {a} ',
- // color: "#eee"
- // }
- // },
- // barMaxWidth: 50,
- // barMinHeight: 20,
- // itemStyle: {
- // color: {
- // type: 'linear',
- // x: 0,
- // y: 0,
- // x2: 1,
- // y2: 0,
- // colorStops: [
- // {
- // offset: 0,
- // color: roundColor[i % 3] // 0% 处的颜色
- // }, {
- // offset: 1,
- // color: '#27303f' // 100% 处的颜色
- // }
- // ]
- // }
- // }
- // //itemStyle: {
- // // color: {
- // // type: 'linear',
- // // x: 0,
- // // y: 0,
- // // x2: 0,
- // // y2: 1,
- // // colorStops: [
- // // {
- // // offset: 0,
- // // color: roundColor[i % 3] // 0% 处的颜色
- // // }, {
- // // offset: 1,
- // // color: '#27303f' // 100% 处的颜色
- // // }
- // // ]
- // // },
- // // barBorderRadius: [50, 50, 0, 0]
- // //}
- //});
- var option = {
- grid: {
- top: 40,
- bottom: 20,
- left: 30,
- right: 10,
- borderColor: textColor[1]
- },
- legend: {
- right: 20,
- textStyle: {
- color: textColor[1]
- },
- icon: 'circle'
- },
- title: titleOpts,
- series: series
- };
- //console.log(option);
- cmdChart.setOption(option);
- }
- </script>
- }
|