coderun-echarts

coderun.json

{"config":{"codeTheme":"OneDarkPro","pageThemeSyncCodeTheme":true,"openAlmightyConsole":true,"autoRun":true,"layout":"edit","keepPreviousLogs":true,"codeFontSize":14},"title":"coderun-echarts","code":{"HTML":{"language":"html","content":"<!-- 为ECharts准备一个具备大小（宽高）的Dom -->\n<div id=\"main\" style=\"width: 800px; height:600px;\"></div>","resources":[]},"CSS":{"language":"css","content":"","resources":[]},"JS":{"language":"javascript","content":"// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById(\"main\"));\n\n// 指定图表的配置项和数据\n// prettier-ignore\nconst hours = [\n    '0','1星','2星','3星','4星','5星','6'\n];\n\n// prettier-ignore\nconst days = [\n    '智驾车型覆盖度',\t'自动泊车',\t'记忆泊车',\t'高速LCC',\t'城区LCC',\t'高速领航辅助驾驶',\t'城区领航辅助驾驶'\n];\n\n// prettier-ignore\nconst data = [[0, 3, 1], [0, 4, 4], [0, 5, 1], [1, 4, 6], [2, 3, 1], [2, 5, 3], [3, 5, 6], [4, 4, 3], [4, 5, 3], [5, 3, 1], [5, 4, 2], [5, 5, 3], [6, 3, 1], [6, 4, 2], [6, 5, 2]];\nconst title = [];\nconst singleAxis = [];\nconst series = [];\nconst subtextMapper = {\n  记忆泊车: \"(2家未推送该功能)\",\n  城区领航辅助驾驶: \"(1家未推送该功能)\",\n};\n\ndays.forEach(function (day, idx) {\n  title.push({\n    textBaseline: \"middle\",\n    top: ((idx + 0.5) * 100) / 7 + \"%\",\n    text: day,\n    textStyle: {\n      fontSize: 16,\n    },\n    subtext: subtextMapper[day],\n    itemGap: 2,\n  });\n  singleAxis.push({\n    left: 150,\n    type: \"category\",\n    boundaryGap: false,\n    data: hours,\n    top: (idx * 100) / 7 + 3 + \"%\",\n    height: 100 / 7 - 10 + \"%\",\n    // axisTick: ['', 1, 2, 3, 4, 5, ''],\n    axisLabel: {\n      // interval: 0,\n      interval: (idx, value) => idx > 0 && idx <= 5,\n      // showMinLabel:false,\n      // showMaxLabel:false\n    },\n  });\n  series.push({\n    singleAxisIndex: idx,\n    coordinateSystem: \"singleAxis\",\n    type: \"scatter\",\n    data: [],\n    symbolSize: function (dataItem) {\n      return dataItem[1] * 9;\n    },\n  });\n});\ndata.forEach(function (dataItem) {\n  series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);\n});\noption = {\n  grid: {\n    x: \"10%\", // 距顶部的距离可以是百分比\n    X2: \"10%\", // 距左边的距离可以是百分比\n    y: \"10%\", // 距右边的距离可以是百分比\n    y2: \"10%\", // 距底部的距离可以是百分比\n  },\n  tooltip: {\n    position: \"top\",\n  },\n  toolbox: {\n    show: true,\n    feature: {\n      restore: {},\n      saveAsImage: {\n        show: true,\n        excludeComponents: [\"toolbox\"],\n        pixelRatio: 2,\n        type: [\"png\"],\n        title: [\"保存\"],\n      },\n    },\n  },\n  textStyle: {\n    fontFamily: \"Noto Sans SC\",\n    // fontFamily: 'monospace'\n  },\n  title: title,\n  singleAxis: singleAxis,\n  series: series,\n};\n\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n","resources":[{"name":"ECharts","url":"./lib/[email protected]"}]},"VUE":{"language":"vue2","content":"","resources":[]}}}