戒酒的李白
@@ -173,3 +173,163 @@ @@ -173,3 +173,163 @@
173 </div> 173 </div>
174 {% endblock %} 174 {% endblock %}
175 175
  176 +{% block echarts %}
  177 + <script>
  178 + var chartDom = document.getElementById('main');
  179 + var myChart = echarts.init(chartDom);
  180 + var option;
  181 + var colors = ['#66cc99','#ffcc66','#ff6666','#6699cc']
  182 + option = {
  183 + title: {
  184 + text: '点赞区间统计'
  185 + },
  186 + tooltip: {
  187 + trigger: 'axis'
  188 + },
  189 + legend: {
  190 + data: ['区间个数']
  191 + },
  192 + toolbox: {
  193 + show: true,
  194 + feature: {
  195 + dataView: { show: true, readOnly: false },
  196 + magicType: { show: true, type: ['line', 'bar'] },
  197 + restore: { show: true },
  198 + saveAsImage: { show: true }
  199 + }
  200 + },
  201 + calculable: true,
  202 + xAxis: [
  203 + {
  204 + type: 'category',
  205 + // prettier-ignore
  206 + data:{{ xData |tojson }}
  207 + }
  208 + ],
  209 + yAxis: [
  210 + {
  211 + type: 'value'
  212 + }
  213 + ],
  214 + series: [
  215 + {
  216 + name: '区间个数',
  217 + type: 'bar',
  218 + data: {{ yData }},
  219 + itemStyle:{
  220 + color:function(params){
  221 + return colors[params.dataIndex % colors.length];
  222 + }
  223 + },
  224 + markPoint: {
  225 + data: [
  226 + { type: 'max', name: 'Max' },
  227 + { type: 'min', name: 'Min' }
  228 + ]
  229 + },
  230 + markLine: {
  231 + data: [{ type: 'average', name: 'Avg' }]
  232 + }
  233 + }
  234 + ]
  235 + };
  236 + option && myChart.setOption(option);
  237 + </script>
  238 + <script>
  239 + var chartDom = document.getElementById('mainTwo');
  240 + var myChart = echarts.init(chartDom);
  241 + var option;
  242 +
  243 + option = {
  244 + toolbox: {
  245 + show: true,
  246 + feature: {
  247 + dataView: { show: true, readOnly: false },
  248 + magicType: { show: true, type: ['line', 'bar'] },
  249 + restore: { show: true },
  250 + saveAsImage: { show: true }
  251 + }
  252 + },
  253 + title: {
  254 + text: '文章评论区间统计'
  255 + },
  256 + tooltip: {
  257 + trigger: 'axis'
  258 + },
  259 + legend: {
  260 +
  261 + },
  262 + xAxis: {
  263 + type: 'category',
  264 + data: {{ x1Data | tojson }}
  265 + },
  266 + yAxis: {
  267 + type: 'value'
  268 + },
  269 + series: [
  270 + {
  271 + name:"区间个数",
  272 + data: {{ y1Data }},
  273 + type: 'line',
  274 + symbol: 'triangle',
  275 + symbolSize: 20,
  276 + lineStyle: {
  277 + color: '#5470C6',
  278 + width: 4,
  279 + type: 'dashed'
  280 + },
  281 + itemStyle: {
  282 + borderWidth: 3,
  283 + borderColor: '#EE6666',
  284 + color: 'yellow'
  285 + }
  286 + }
  287 + ]
  288 + };
  289 +
  290 + option && myChart.setOption(option);
  291 +
  292 + </script>
  293 + <script>
  294 + var chartDom = document.getElementById('mainThree');
  295 + var myChart = echarts.init(chartDom);
  296 + var option;
  297 +
  298 + option = {
  299 + title: {
  300 + text: '转发量分析区间图'
  301 + },
  302 + tooltip: {
  303 + trigger: 'axis',
  304 + axisPointer: {
  305 + type: 'shadow'
  306 + }
  307 + },
  308 + legend: {},
  309 + grid: {
  310 + left: '3%',
  311 + right: '4%',
  312 + bottom: '3%',
  313 + containLabel: true
  314 + },
  315 + xAxis: {
  316 + type: 'value',
  317 + boundaryGap: [0, 0.01]
  318 + },
  319 + yAxis: {
  320 + type: 'category',
  321 + data: {{ x2Data | tojson }}
  322 + },
  323 + series: [
  324 + {
  325 + name: '区间个数',
  326 + type: 'bar',
  327 + data: {{ y2Data }}
  328 + }
  329 + ]
  330 + };
  331 +
  332 + option && myChart.setOption(option);
  333 +
  334 + </script>
  335 +{% endblock %}