在vue 中 引入echarts 中散点图，并修改横坐标为自己的数据内容

2022年4月5日 90次阅读 来源: 佛系盼毕业 
<div>
	<el-row>
     	 <div style="height: 500px;width: 1000px;" id="sandiantu">		
    </el-row>
  </div>

<script> import * as echarts from "echarts"; export default {  data(){  return{ } }, mounted() {  let bar = echarts.init(document.getElementById('sandiantu')); let option = {  title: {  text: '1111111111', left: 'center', fontSize: 14,//标题显示的位置 }, xAxis: {  data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], splitLine: {  show: true }, }, yAxis: {  axisLine: {  show: true }, splitLine: {  show: true }, }, tooltip: {  /* 当鼠标划过时，返回需要的信息*/ position: 'top', formatter: function (param) {  var value = param.value; return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[0] + '(' + value[1] + ')' + '</div>'; } }, series: [ {  //改变散点的颜色，根据判断 itemStyle: {  normal: {  color: function (params) {  if (params.value[1] > 0 && params.value[1] < 5) {  return "#FE8463"; } else if (params.value[1] >= 5 && params.value[1] <= 10) {  return "#27727B"; } return "#9BCA63"; } } }, type: 'scatter', data: [ data: [ ['Sun', 8.04], ['Sun', 6.95], ['Sun', 1.58], ['Tue', 8.81], ['Tue', 8.33], ['Tue', 7.66], ['Tue', 6.81], ['Tue', 6.33], ['Mon', 8.96], ['Mon', 6.82], ['Mon', 7.2], ['Mon', 7.2], ['Mon', 4.23], ['Wed', 7.83], ['Wed', 4.47], ['Wed', 3.33], ['Wed', 4.96], ['Thu', 7.24], ['Thu', 6.26], ['Thu', 8.84], ['Sat', 5.82], ['Fri', 5.68] ], ], <!-- symbolSize 为让散点图形的大小根据数据变化*40倍--> symbolSize: function (dataItem) {  return dataItem[1] * 4; } } ] }; bar.setOption(option); } } </script>

《在vue 中 引入echarts 中散点图，并修改横坐标为自己的数据内容》

    原文作者：佛系盼毕业
    原文地址: https://blog.csdn.net/weixin_51192038/article/details/123552547
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞